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

我正在处理一个项目，其中占位符颜色是由开发人员全局定义的。但是现在我需要用不同的占位符颜色来设计表单的样式。我怎样才能正确地处理它

CSS

请尝试以下代码：

您只需要在前面添加.box，如：

 .box::-moz-placeholder

---

干杯

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

在第一个示例中，您应该更改HTML标记。使用CSS，首先搜索类“box”，然后搜索输入元素。因此，工作HTML标记将是：

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

---

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

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

---

只是因为我认为菲利普·休斯曼的另一个答案是从Vucko的评论中抄来的。我还将回答这个问题，并解释为什么您的代码不起作用

让我们以这个为例：

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

在这里，您选择

.box

，然后尝试查找

输入

，以更改占位符颜色。如果您的代码是这样的：

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

因此，您已经进入了

输入

，这就是您的代码无法工作的原因。

输入

中没有

输入

。因此，从CSS中去掉

input

，只留下

.box

意味着您只选择了

input

.box::-webkit-input-placeholder

希望这能很好地解释这件事，让你明白你错在哪里。

这对我来说很有用

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

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

---

例如

.box:：-webkit输入占位符

等-所以你选择了一个没有任何解释的答案，他们很可能是从Vucko复制的。因为这很有道理，不要把它交给那些花时间和精力解释它到底出了什么问题以及如何解决它的人。我同意@Ruddy Value Addition的观点：以防有人想知道为什么Vucko的建议有效，而不是OP的建议，这是因为OP的CSS将在

.box

中查找

输入

和

文本区域

。或者，

input.box

和

textarea.box

也应该适用于按元素类型分类的目标类…请解释为什么只需要

.box

？消极态度是什么？我没有复制任何东西，只是为了满足他的需要。@FilipHuysmans没有解释，在这样的事情上，一句简单的关于它为什么错的话会帮助很多其他人，而不仅仅是OP。看看我和dTDesign的答案，这将帮助更多的人，然后只是操作。不要误解我，你的答案是正确的，如果你说你自己做了，那就足够公平了，但下次我建议在答案上投入一些精力，以便其他用户/观众也能从中受益。还有很好的否决票，因为你不喜欢我说的话。干得好。没问题，这就是你批评别人时得到的。下次我会尽量多解释，以帮助别人。@FilipHuysmans:你不应该因为有人批评你而否决答案。Ruddy的答案应该得到向上投票，因为他的答案很有用（将鼠标悬停在向上/向下投票按钮上，查看何时应该单击它们）。努力向批评家学习。所以我也学会了如何回答。我的第一个答案很糟糕，但我试图让它变得更好。你的答案可能是有用的，因为它是有效的，但答案应该总是有解释的。给你的答案加上解释，你的答案会非常有用。

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

.box::-webkit-input-placeholder

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