Question

我有以下jQuery代码： -

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

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

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

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

3 个答案: