CODEWITHSUNDEEP
htmlcss
Akash
Akash

Reputation: 295

placeholder focus not working

The Placeholder color is red. The default text field value is #444. What I want, If i click the text field, the placeholder color will change. But the default color should not be changed. Is it possible to do?

Please see my fiddle.

http://jsfiddle.net/ca35A/

CSS:
.add_product input[type=text]{ color:#444;}

::-webkit-input-placeholder {
   color: #D72D2E;
}

:-moz-placeholder { /* Firefox 18- */
   color: #D72D2E;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #D72D2E;  
}

:-ms-input-placeholder {  
   color: #D72D2E;  
}




::-webkit-input-placeholder:focus {
   color: #F3797A;
}

:-moz-placeholder:focus { /* Firefox 18- */
   color: #F3797A;  
}

::-moz-placeholder:focus {  /* Firefox 19+ */
   color: #F3797A;  
}

:-ms-input-placeholder:focus {  
   color: #F3797A;  
}

Upvotes: 1

Views: 1197

Answers (2)

pawel
pawel

Reputation: 36995

Move the :focus before ::placeholder:

:focus::-webkit-input-placeholder //etc

http://jsfiddle.net/ca35A/1/

Upvotes: 3

putvande
putvande

Reputation: 15213

You are setting the :focus on the placeholder but it should be on the input: 

:focus::-webkit-input-placeholder {
    color: #F3797A;
}

:focus:-moz-placeholder { /* Firefox 18- */
    color: #F3797A;
}

:focus::-moz-placeholder {  /* Firefox 19+ */
    color: #F3797A;
}

:focus:-ms-input-placeholder {
    color: #F3797A;
}

Fiddle

Note that not all browser support this. IE for example hides the placeholder when you focus on the input.

Upvotes: 1

Related Questions