AtoZ CSS Quick Tip: Placeholder Text

Share this article

AtoZ CSS Quick Tip: Placeholder Text

This article is a part of our AtoZ CSS Series. You can find other entries to the series here. You can view the full transcript and screencast for its corresponding video, Pseudo Elements, here.

Welcome to our AtoZ CSS series! In this series, I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, so in this article, we’ve added a new quick tip about styling placeholder text. p4-01

P is for Placeholder Text

Pseudo elements :before and :after are great for building complex design features without cluttering the markup with non-semantic elements. Other pseudo elements like :first-line and :first-letter give us access to styling parts of elements that aren’t found marked up in the HTML document.

We looked at many of these in the Pseudo Elements screencast but one pseudo element we didn’t look at was for styling placeholder text. Let’s fix that.

Selecting input placeholders

First, let’s imagine the following HTML:

<input class="name-field" type="text" placeholder="Enter your name">

We could set the color of the input text to red as follows:

.name-field {
  color: red;
}

We could also select and style the input from its placeholder attribute:

input[placeholder="Enter your name"] {
  color: red;
}

But this still styles the text of any user input typed into the field, rather than styling the appearance of the placeholder text itself. To do that we need a series of vendor prefixed selectors for the placeholder pseudo element.

::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {/*Firefox 18-*/
  color: red;  
}
::-moz-placeholder {/*Firefox 19+*/
  color: red;  
}
:-ms-input-placeholder {  
  color: red;  
}

This may appear like duplications but unfortunately there is no DRY-er (Don’t Repeat Yourself) way to do this.

The following will not work:

::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder {
  color: red;  
}

This is because any browser must be able to “understand” each of the selectors in the comma-separated series for the styles within the braces to be applied.

Use Sass to style placeholders

One solution to this repetitive CSS is to use a Sass mixin. This is the one that I use in 99% of my projects:

@mixin input-placeholder {
  ::-webkit-input-placeholder {
    @content;
  }
  :-moz-placeholder {/* Firefox 18- */
    @content;
  }
  ::-moz-placeholder {/* Firefox 19+ */
    @content;
  }
  :-ms-input-placeholder {  
    @content;
  }
}

/* usage */

@include input-placeholder {
  color: red;
}

This allows me to set the styles for placeholders in all browsers with a single Sass @include which helps keep the code shorter and more maintainable.

Be careful of specificity when styling placeholders

In the IE browser, setting styles on an input can override the styles set for the placeholder text.

:-ms-input-placeholder {
  color: red;
}
input[type="text"] { 
  color: blue; /* placeholder text will be blue in IE */
}

Ensure IE placeholder styles have higher specificity so they appear as expected. This could even be a case for using !important but always be careful if using that powerful tool.

Be aware of opacity of placeholders

In Firefox, placeholder text has a default opacity of around 0.5 so setting color: red on the placeholder will result in a muted color unless you also set opacity: 1.

Even if you’re using Normalize.css this isn’t reset for you. If fully opaque placeholders are key to your project, keep this tip in mind!

Frequently Asked Questions (FAQs) about CSS Placeholder Text

How can I change the color of placeholder text in CSS?

Changing the color of placeholder text in CSS can be achieved by using the ::placeholder pseudo-element. This pseudo-element allows you to style the placeholder text within an input or textarea element. Here’s an example of how to change the color to red:

::placeholder {
color: red;
}
Remember, browser compatibility is important. For Firefox, use ::-moz-placeholder, for Internet Explorer, use :-ms-input-placeholder, and for Chrome, Safari and Opera, use ::-webkit-input-placeholder.

Can I change the font size of placeholder text?

Yes, you can change the font size of placeholder text. Just like changing the color, you can use the ::placeholder pseudo-element to change the font size. Here’s an example:

::placeholder {
font-size: 18px;
}
This will change the font size of the placeholder text to 18px.

Is it possible to change the font style of placeholder text?

Absolutely, you can change the font style of placeholder text. You can make it italic, bold, or any other style you want. Here’s an example of how to make it italic:

::placeholder {
font-style: italic;
}
This will change the font style of the placeholder text to italic.

Can I change the opacity of placeholder text?

Yes, you can change the opacity of placeholder text. This can be done by using the opacity property in CSS. Here’s an example:

::placeholder {
opacity: 0.5;
}
This will change the opacity of the placeholder text to 0.5, making it semi-transparent.

How can I add a background color to placeholder text?

Unfortunately, you cannot add a background color to placeholder text. The ::placeholder pseudo-element only allows you to style the color, font-size, font-style, and opacity of the placeholder text. It does not support other properties like background-color.

Can I use CSS animations on placeholder text?

No, you cannot use CSS animations on placeholder text. The ::placeholder pseudo-element does not support CSS animations or transitions.

Is it possible to style different placeholders differently?

Yes, you can style different placeholders differently. You just need to use a different class or id for each input or textarea element. Here’s an example:

.input1::placeholder {
color: red;
}

.input2::placeholder {
color: blue;
}
This will make the placeholder text in the input with class ‘input1’ red and the placeholder text in the input with class ‘input2’ blue.

Can I use pseudo-classes with ::placeholder?

No, you cannot use pseudo-classes like :hover, :active, or :focus with ::placeholder. The ::placeholder pseudo-element does not support pseudo-classes.

Is it possible to change the placeholder text using CSS?

No, you cannot change the placeholder text using CSS. The content of the placeholder text can only be changed using HTML.

Can I use media queries with ::placeholder?

Yes, you can use media queries with ::placeholder. This allows you to style the placeholder text differently based on the screen size or device. Here’s an example:

@media (max-width: 600px) {
::placeholder {
color: red;
}
}
This will change the color of the placeholder text to red on screens that are 600px wide or less.

Guy RoutledgeGuy Routledge
View Author

Front-end dev and teacher at The General Assembly London. A to Z CSS Screencaster, Founder of sapling.digital and Co-founder of The Food Rush.

aleczandergAtoZ CSSlearn-advanced-css
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form