How to modify the placeholder color , without affecting the input text color

Question

I have the following jQuery code:-

if ($("#Choice").prop("checked"))
                    $("#Technology").attr("placeholder", "Search by Tag...").css({ "color": "#b2cde0" });

currently the placeholder will have the defined color, but also the input text will have the defined color. while i need to chnage the placeholder color, while keeping the default input text color ?

Answer 1

Best way of doing this is to use addClass() to the element with the pre-defined placeholder vendor prefixed properties:

.someClass ::-webkit-input-placeholder {
   color: red;
}

.someClass :-moz-placeholder { /* Firefox 18- */
   color: red;  
}

.someClass ::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

.someClass :-ms-input-placeholder {  
   color: red;  
}

You can use addClass() like so:

$( "#Technology" ).addClass( "someClass" );

Documentation: http://api.jquery.com/addclass/

Similarly, if you need to remove the placeholder class when the #Choice is unchecked, you can use removeClass() to remove the CSS class above. [http://api.jquery.com/removeclass/]

Answer 2

You can add a class which has placeholder color set to desired color. something like this:

Css

.pccolor::-webkit-input-placeholder,.pccolor:-moz-placeholder,.pccolor::-moz-placeholder,.pccolor:-ms-input-placeholder{
    color: #b2cde0;
 }

Js

 $("#Technology").addClass('pccolor');

Answer 3

To select just the placeholder you have to use some new selectors:

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
    opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
    opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}