JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<label>This is the standard</label>
<input placeholder="What can we help you find?" type="text" class="one">
<br><br>
<label>This has a custom placeholder color and focus color</label>
<input placeholder="What can we help you find?" type="text" class="two">
<br><br>
<label>This makes the placeholder transparent (hidden) on focus</label>
<input placeholder="What can we help you find?" type="text" class="three">

<p>user agents are warned against removing the placeholder when the form is auto-focused because the user may not have seen the placeholder.</p>
</p>

CSS

body { font-family: Arial; }

label { display: block; margin-bottom: .2em; }

input { 
  padding: .25em;
  width: 20em;
}

input.two::-webkit-input-placeholder { color: #3B5343; font-weight: bold; }
input.two:-moz-placeholder { color: #3B5343; font-weight: bold; } /* FF 4-18 */
input.two::-moz-placeholder { color: #3B5343; font-weight: bold; } /* FF 19+ */
input.two:-ms-input-placeholder { color: #3B5343; font-weight: bold; } /* IE 10+ */
input.two::placeholder { color: #3B5343; font-weight: bold; } /* Generic that nobody supports yet */

input.two:focus::-webkit-input-placeholder { color:#ddd; }
input.two:focus:-moz-placeholder { color:#ddd; } /* FF 4-18 */
input.two:focus::-moz-placeholder { color:#ddd; } /* FF 19+ */
input.two:focus:-ms-input-placeholder { color:#ddd; } /* IE 10+ */
input.two:focus::input-placeholder { color:#ddd; } /* Generic that nobody supports yet */

input.three:focus::-webkit-input-placeholder { color: transparent; }
input.three:focus:-moz-placeholder { color: transparent; } /* FF 4-18 */
input.three:focus::-moz-placeholder { color: transparent; } /* FF 19+ */
input.three:focus:-ms-input-placeholder { color: transparent; } /* IE 10+ */
input.three:focus::input-placeholder { color: transparent; } /* Generic that nobody supports yet */