Html CSS - 无法按类更改占位符颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21113012/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - Cannot change placeholder color by class
提问by user2952265
I'm working with a project where the placeholder color was defined globally by developer. But now I need to style a form with a different placeholder color. How can I address it correctly?
我正在处理一个项目，其中占位符颜色由开发人员全局定义。但现在我需要用不同的占位符颜色来设计一个表单。我怎样才能正确解决它？
CSS
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;
}
回答by Filip Huysmans
Try this code:
试试这个代码：
you where close only needed to add .box in front like:
您只需要在前面添加 .box 即可，例如：
.box::-moz-placeholder
Cheers
干杯
回答by Michael Schmidt
You can reach your target in several solutions.
您可以通过多种解决方案达到您的目标。
In the first one, you should change your HTML markup. With your CSS, you first search for the class "box", and the for the input element. So the working HTML markup would be:
在第一个中，您应该更改 HTML 标记。使用 CSS，首先搜索类“box”，然后搜索 input 元素。所以工作的 HTML 标记将是：
<span class="box"><input /></span>
While the span element could be any other element, it should just have the box as class.
Demo 1
虽然 span 元素可以是任何其他元素，但它应该只将框作为类。
演示 1
The second solution is to write the input (and also textarea) in your CSS in front of the .boxelement. So you call only input and textarea elements which have the "box" class.
第二种解决方案是在.box元素前面的 CSS 中写入输入（以及 textarea）。所以你只调用具有“box”类的 input 和 textarea 元素。
input.box::-webkit-input-placeholder, textarea.box::-webkit-input-placeholder {
color: blue;
}
The last solution is to delete the input and the textarea part. So you'll call all elements, which have "box" as a class.
最后的解决办法是删除input和textarea部分。因此，您将调用所有具有“box”作为类的元素。
.box::-webkit-input-placeholder {
color: blue;
}
回答by Ruddy
Simply because I think the other answer by Filip Huysmans was just copied from Vucko's comment. I am going to also answer it and explain why your code didn't work.
仅仅因为我认为 Filip Huysmans 的另一个答案是从 Vucko 的评论中复制的。我还将回答它并解释为什么您的代码不起作用。
Lets use this one as an example:
让我们以这个为例：
.box input::-webkit-input-placeholder {
color: blue;
}
Here you are selecting .boxand then trying to find an inputto change the placeholder colour. If your code was like this:
在这里，您正在选择.box并尝试找到一个input来更改占位符颜色。如果你的代码是这样的：
<div class="box">
<input placeholder="blue" />
</div>
It would have worked. In the code above you are selecting the class .boxand then finding all inputswithin it.
它会起作用。在上面的代码中，您选择了类.box，然后inputs在其中查找所有内容。
Now in your code we have:
现在在您的代码中，我们有：
<input class="box" placeholder="blue" />
So you are already in the input, thats why your code didnt work. There is no inputin the input. So taking away inputfrom the CSS and leaving just .boxmeans you are selecting just that input.
所以你已经在input，这就是为什么你的代码不起作用。有没有input在input。所以input从 CSS 中拿走并离开只是.box意味着你正在选择那个input。
.box::-webkit-input-placeholder
Hope this explains it well enough for you to understand where you went wrong.
希望这能很好地解释它，让你明白你哪里出错了。
回答by Giriprasad Yedulla
This worked for me
这对我有用
-webkit-text-fill-color: white;
opacity: 1;
Just add it in the input/text area tag directly
直接在输入/文本区域标签中添加即可
