如何修改占位符顏色，而不影響輸入文本顏色

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