如何修改占位符颜色，而不影响输入文本颜色

Question

我有以下jQuery代码： -

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

目前占位符将具有已定义的颜色，但输入文本也将具有已定义的颜色。 虽然我需要chnage占位符颜色，同时保持默认输入文本颜色？

Answer 1

最好的方法是使用addClass()到具有预定义占位符供应商前缀属性的元素：

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

您可以像这样使用addClass() ：

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

文档： http ： //api.jquery.com/addclass/

同样，如果在取消选中#Choice时需要删除占位符类，则可以使用removeClass()删除上面的CSS类。 [ http://api.jquery.com/removeclass/]

Answer 2

您可以添加一个将占位颜色设置为所需颜色的类。 这样的事情：

CSS

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

JS

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

Answer 3

要仅选择占位符，您必须使用一些新的选择器：

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