How to change placeholder color on focus?

css input focus placeholder

101,321

Solution 1

This works for me:

input:focus::placeholder {
  color: blue;
}

Solution 2

Try this, this should work :

input::-webkit-input-placeholder {
    color: #999;
}
input:focus::-webkit-input-placeholder {
    color: red;
}

/* Firefox < 19 */
input:-moz-placeholder {
    color: #999;
}
input:focus:-moz-placeholder {
    color: red;
}

/* Firefox > 19 */
input::-moz-placeholder {
    color: #999;
}
input:focus::-moz-placeholder {
    color: red;
}

/* Internet Explorer 10 */
input:-ms-input-placeholder {
    color: #999;
}
input:focus:-ms-input-placeholder {
    color: red;
}

Here is an example : http://jsfiddle.net/XDutj/27/

Solution 3

In addition to Pranav answer I refined the code with textarea compatibility:

::-webkit-input-placeholder { color: #999; }
:-moz-placeholder { color: #999; }

:focus::-webkit-input-placeholder { color: #ccc; }
:focus:-moz-placeholder { color: #ccc; }

Solution 4

The following worked for me:

input:focus::-webkit-input-placeholder
{
    color: red;
}

Solution 5

I've found this solution with JQuery:

 $('input[type="text"]').each(function(){

    $(this).focus(function(){
      $(this).addClass('input-focus');
    });

    $(this).blur(function(){
      $(this).removeClass('input-focus');
    });

  });

with this css:

.input-focus::-webkit-input-placeholder { color: #f00; }    
.input-focus:-moz-placeholder { color: #f00; }
.input-focus:-ms-input-placeholder { color: #f00; }

View more solutions

101,321

Author by

Davide

Italian Web Designer & Developer

Updated on July 05, 2022

Comments

Davide almost 2 years

How to change the color of placeholder when focus the input field? I use this css to set the default color, but how to change it on focus?

::placeholder { color: blue; }

::-webkit-input-placeholder { color: blue; }

/* Firefox < 19 */
:-moz-placeholder { color: blue; }

/* Firefox > 19 */
::-moz-placeholder { color: blue; }

/* Internet Explorer 10 */
:-ms-input-placeholder { color: blue; }

BoltClock over 11 years

That wasn't necessary, but I suspect it's because, on further inspection, your code would color the actual value of the input on focus, rather than its placeholder text only.
Davide over 11 years

why there is not :-ms-input-placeholder?
Pranav 웃 over 11 years

I don't have IE to test the above, it would be great if someone could test it. AFAIK, IE9 lacks placeholder support : caniuse.com/#search=placeholder
Sethen almost 11 years

Works like a charm for me. Didn't test in IE though, obviously.
Linus Caldwell almost 11 years

No, sadly it does not work in IE 10 because IE uses the pseudo class :-ms-input-placeholder instead of a pseudo element ::-ms-placeholder. Can't test the focus behavior, because IE per default hides the placeholder on focus (and unfortunately I didn't find a way to avoid that). See this update to your Fiddle.
evalarezo almost 9 years

JQuery is beautiful, but must die. Everything that has a beginning, has an end, @DavidePalmieri
PeeHaa over 7 years

WTH are you on @BoltClock. Of course it needs jQuery...If anything it needs moar jQuery!
Vael Victus almost 6 years

Note: for some reason, you cannot use commas to apply multiple rules. These have to be declared separately as shown. (though you probably only need ms-input and ::placeholder now)
mikael1000 over 2 years

This should be changed to be the marked answer.