Styling Placeholder Text with CSS

Code Tidbit by SamanthaMing.com

Use the ::placeholder pseudo-element to style your placeholder text in an <input>or <textarea> form element. Most modern browsers support this, but for older browsers, vendor prefixes will be required.

::placeholder { 
  color: deeppink;
  font-size: 5rem;
  text-transform: uppercase;
}

HTML

<input placeholder="CSS Placeholder">

Vendor Prefixes

So the syntax I used is supported by most modern browsers:

/* MODERN BROWSER */
::placeholder { 
  color: deeppink;
}

But for some browsers or older browsers, you will need to use the vendor prefixes.

/* WebKit, Edge */
::-webkit-input-placeholder {
  color: deeppink;
}
/* Firefox 4-18 */
:-moz-placeholder { 
  color: deeppink;
  opacity: 1;
}
/* Firefox 19+ */
::-moz-placeholder { 
  color: deeppink;
  opacity: 1;
}
/* IE 10-11 */
:-ms-input-placeholder { 
  color: deeppink;
}
/* Edge */
::-ms-input-placeholder { 
  color: deeppink;
}
/* MODERN BROWSER */
::placeholder { 
  color: deeppink;
}

Whoa! I know, that’s a huge list. And you might notice quite a few different variations of implementations. So let’s…