无法更改输入占位符的颜色

Question

我正在尝试弄清楚如何在表单的文本框中更改占位符的颜色。我在网上找到了一些教程 (like this one) 来说明如何操作，但我无法让它发挥作用。

<form action="/Home/Register" id="RegisterForm" method="post" novalidate="novalidate">
    <input autocomplete="off" class="form-control input-sm required" id="FirstName" name="FirstName" placeholder="First Name*" type="text" value="" aria-required="true">
</form>

然后，在 CSS 中，我尝试了这些：

::-webkit-input-placeholder{color:#434c53}
::-moz-placeholder{color:#434c53}
:-ms-input-placeholder{color:#434c53}
input.form-control ::placeholder{color:#434c53}

还有：

input.form-control ::-webkit-input-placeholder{color:#434c53}
input.form-control ::-moz-placeholder{color:#434c53}
input.form-control :-ms-input-placeholder{color:#434c53}
input.form-control ::placeholder{color:#434c53}

还有：

.form-control ::-webkit-input-placeholder{color:#434c53}
.form-control ::-moz-placeholder{color:#434c53}
.form-control :-ms-input-placeholder{color:#434c53}
.form-control ::placeholder{color:#434c53}

还有其他一些组合。我尝试的任何方法都不起作用。

Answer 1

<input type="text" placeholder='global'>

<input class='red' type="text" placeholder='red'>

-

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: blue;
}
::-moz-placeholder { /* Firefox 19+ */
  color: blue;
}
:-ms-input-placeholder { /* IE 10+ */
  color: blue;
}
:-moz-placeholder { /* Firefox 18- */
  color: blue;
}

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

jsFiddle