Question

我正在开发一个项目，其中占位符颜色由开发人员全局定义。但是现在我需要为具有不同占位符颜色的表单设置样式。我该如何正确地解决它？

CSS

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

}
::-moz-placeholder {
color: red;

}
:-ms-input-placeholder {
color: red;

}


.box input::-webkit-input-placeholder, .box textarea::-webkit-input-placeholder {
  color: blue;
}
.box input:-moz-placeholder, .box textarea:-moz-placeholder {
  color: blue;
}
.box input:-ms-input-placeholder, .box textarea:-ms-input-placeholder{
  color: blue;
}

Answer 1

试试这段代码：

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

你在哪里关闭只需要在前面添加.box，如：

 .box::-moz-placeholder

干杯

Answer 2

您可以通过多种解决方案达到目标。

在第一个中，您应该更改HTML标记。使用CSS，首先搜索类“box”，然后搜索input元素。所以工作的HTML标记将是：

<span class="box"><input /></span>

虽然span元素可以是任何其他元素，但它应该只有框作为类 Demo 1

第二个解决方案是在.box元素前面的CSS中输入输入（以及textarea）。因此，您只调用具有“box”类的input和textarea元素。

input.box::-webkit-input-placeholder, textarea.box::-webkit-input-placeholder {
  color: blue;
}

Demo 2

最后一个解决方案是删除输入和textarea部分。因此，您将调用所有元素，其中“box”作为类。

.box::-webkit-input-placeholder {
  color: blue;
}

Demo 3

Answer 3

仅仅因为我认为Filip Huysmans的另一个答案只是从Vucko的评论中复制而来。我也将回答它并解释为什么你的代码不起作用。

让我们以此为例：

.box input::-webkit-input-placeholder {
  color: blue;
}

在这里，您选择.box，然后尝试找到input来更改占位符颜色。如果您的代码是这样的：

<div class="box">
    <input placeholder="blue" />
</div>

它会起作用。在上面的代码中，您选择了课程.box，然后在其中找到所有inputs。

DEMO HERE

现在，您的代码中包含：

<input class="box" placeholder="blue" />

所以你已经在input，这就是为什么你的代码不起作用的原因。 input中没有input。因此，从CSS中删除input并仅留下.box意味着您只选择input。

.box::-webkit-input-placeholder

DEMO HERE

希望这能够很好地解释你在哪里出错。

Answer 4

这对我有用

-webkit-text-fill-color: white;
opacity: 1;

只需将其直接添加到输入/文本区域标签中

例如https://codepen.io/anon/pen/LqgOOp

CSS - 无法按类更改占位符颜色

4 个答案: