How to change placeholder color on focus?

Question

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?

::-webkit-input-pl         


        

Answer 1

You can create a material design animated placeholder that shrinks on top when input field is focused.

<div class="field">
 <input type="text" name="user" required><br>
 <label>Enter Username</label>
 </div>

Basically the label field is going to act like a placeholder. We can do this only using css. Explained here http://www.voidtricks.com/create-material-design-animated-placeholder/

Answer 2

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; }

Answer 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; }​