Question

我需要在框架中更改占位符的样式。我需要覆盖框架为我插入的instyle占位符样式。为此，我插入了以下代码：

::-webkit-input-placeholder { color:#FFFF00 !important;}
::-moz-placeholder { color:#FFFF00 !important; } /* firefox 19+ */
:-ms-input-placeholder { color:#FFFF00 !important; } /* ie */
input:-moz-placeholder { color:#FFFF00 !important;}

这样可以使所有占位符成为这种风格。问题是我需要将一个类的字段作为另一种颜色。要做到这一点，我做了：

 ::-webkit-input-placeholder .my_class { color:#000000!important;}
    ::-moz-placeholder .my_class  { color:#000000!important; } /* firefox 19+ */
    :-ms-input-placeholder .my_class  { color:#FFFF000 !important; } /* ie */
    input:-moz-placeholder .my_class  { color:#000000!important;}

但这不起作用。占位符仍然是＃FFFF00 。我怎么能做到这一点？

Answer 1

将.my_class放在::-x-placeholder伪元素

之前

input {background:red;}/*added for contrast */


::-webkit-input-placeholder { color:#FFFF00 !important;}
::-moz-placeholder { color:#FFFF00 !important; } /* firefox 19+ */
:-ms-input-placeholder { color:#FFFF00 !important; } /* ie */
input:-moz-placeholder { color:#FFFF00 !important;}

.my_class::-webkit-input-placeholder  { color:#000000!important;}
.my_class::-moz-placeholder   { color:#000000!important; } /* firefox 19+ */
.my_class:-ms-input-placeholder  { color:#FFFF000 !important; } /* ie */
input.my_class:-moz-placeholder   { color:#000000!important;}

<input placeholder="test"/>
<input placeholder="test" class="my_class"/>

Answer 2

http://jsfiddle.net/vyDns/3/

.my_class::-webkit-input-placeholder {
    color: blue! important;
}

占位符样式 - 覆盖使用！important的样式

2 个答案: