How to apply pseudo-element styling to specific class only?

Tags: html,css,placeholder

Problem :

I have input element in html like this:

<input type="text" placeholder="any TEXT" />

And styling in CSS for the placeholder:

::-webkit-input-placeholder { color: red; text-transform: uppercase;}
input::-moz-placeholder {color: red; text-transform: uppercase;}
input:-moz-placeholder {   /* Older versions of Firefox */  color: red; text-transform: uppercase;}
input:-ms-input-placeholder { color: red;   text-transform: uppercase;}

It works fine but, the problem is that it applys this styling to all input elements to on the page, but they suppose to have different placeholder styling. How I can limit this placeholder styling in CSS to specific class - let's say ".placeholder-red" so in HTML I can use it like regular class:

<input type="text" class="placeholder-red"any TEXT" />



I have tried something like this:

.placeholder-red::-webkit-input-placeholder { color: red; text-transform: uppercase;}

and it works, but with ::-webkit-input-placeholder{...} ONLY (meaning that this styling may not work on the other browsers), but how can I apply it to input::-moz-placeholder{...}? I tried things like this - do not work:

.placeholder-red input::-moz-placeholder {color: red; text-transform: uppercase;}

Solution :

You are on the right path as you said with .placeholder-red::-webkit-input-placeholder{...} it worked well.

To apply to the rest of your CSS support, just do this:

input.placeholder-red::-moz-placeholder {
    color: red; text-transform: uppercase;
input.placeholder-red:-moz-placeholder {   
    /* Older versions of Firefox */  
    color: red; text-transform: uppercase;
input.placeholder-red:-ms-input-placeholder { 
    color: rgba(0,5,143,.5);  text-transform: uppercase;

Note that I am using a simple CSS selector: input.placeholder-red then applying the pseudo class onto this selector.

Let me know if this jsFiddle worked well for you.

    CSS Howto..

    How do you skew a div and keep the background image unskewed

    CSS: how can I make this table fit the border when resized?

    How to reference CSS children [duplicate]

    How to trigger a modal view with Highcharts, when zoom is also enabled?

    CSS and html: how to style input file in css (aline the text with the choose file button)?

    How to create a vertical carousel using plain JavaScript and CSS

    How to write bootstrap media queries

    How to remove unwanted white space in CSS

    How to adjust an image size with a progressive scaling on viewport resize

    How to keep layout unchanged when keyboard is displayed?

    How to move some text down in a li tag?

    How to hide element using Class; instead of using css function in JQuery? [closed]

    How to center text with CSS?

    How to change column display order mobile/tablet view CSS Wordpress?

    How do I trace my inner pages via google analytics?

    How to reflow DIV boxes in CSS to stick to bottom right?

    How to make a multi-tiered dropdown menu with HTML and CSS only (maybe tiny JavaScript)

    How to select the specific position element in the certain class in CSS

    How to remove string that dosn't have an html tag using CSS

    How could I add a header to a HTML page via CSS?

    How to re-size an image inserted via tag?

    CSS Hover Events, How to Trigger a Parent's Effect

    CSS: How to make background color around text not flush to the text?

    How to import css dynamically with js?

    How to set auto-margin boxes in flexible-width design using CSS?

    How can I select the first IFRAME within the second FB tag in a div?

    How to make a horizontal expandable menu fluid

    How to avoid a th element from inheriting properties from a tr element in IE6/7

    Responsive CSS layout - how to stretch the background overlay

    Does anybody know how I can adjust this CSS to achieve the desired hyperlink effect I'd like?