使用CSS更改HTML5输入的占位符颜色

Question

使用CSS更改HTML5输入的占位符颜色Chrome支持占位符属性的input[type=text]元素（别人可能做太多）。但以下CSS内容对占位符的值没有任何作用：input[placeholder], [placeholder], *[placeholder] {    color: red !important;}<input type="text" placeholder="Value">Value仍然会留下grey而不是red。有没有办法改变占位符文本的颜色？

Answer 1

/* do not group these rules */

*::-webkit-input-placeholder {

    color: red;

}

*:-moz-placeholder {

    /* FF 4-18 */

    color: red;

    opacity: 1;

}

*::-moz-placeholder {

    /* FF 19+ */

    color: red;

    opacity: 1;

}

*:-ms-input-placeholder {

    /* IE 10+ */

    color: red;

}

*::-ms-input-placeholder {

    /* Microsoft Edge */

    color: red;

}

*::placeholder {

    /* modern browser */

    color: red;

}

<input placeholder="hello"/> <br />

<textarea placeholder="hello"></textarea>

这将为所有input和textarea占位符设置样式。

重要说明：请勿对这些规则进行分组。相反，为每个选择器创建一个单独的规则（组中的一个无效选择器使整个组无效）。

Answer 2

您可能还想要textareas样式：

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;}input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;}

Answer 3

对于Bootstrap和Less用户，有一个mixin .placeholder：

// Placeholder text// -------------------------.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }}