Html 如何更改特定输入字段的占位符颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33864832/
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
How to change placeholder color of specific input field?
提问by Ayaz Shah
I want to change the color of specific place holder. I'm using many input fields for my project, problem is that in some section i need grey color for placeholder and in some section i need white color for placeholder. I have searched for this purpose and find this solution.
我想更改特定占位符的颜色。我在我的项目中使用了许多输入字段，问题是在某些部分我需要灰色占位符，而在某些部分我需要白色占位符。我已经为此目的进行了搜索并找到了此解决方案。
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
But this code is implement on all input placeholder, and i don't need all input placeholder in same color. So can anyone please help me. Thanks in advance.
但是这段代码是在所有输入占位符上实现的，我不需要所有输入占位符的颜色都相同。所以任何人都可以请帮助我。提前致谢。
回答by Mi-Creativity
You need to assign the -input-placeholderto some classnameand add that class to any inputyou need its placeholder to have this, just like this JS Fiddle
您需要将 分配-input-placeholder给 someclassname并将该类添加到任何input您需要其占位符的类中，就像这个JS Fiddle
.change::-webkit-input-placeholder {
/* WebKit, Blink, Edge */
color: #909;
}
.change:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
.change::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
.change:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #909;
}
input[type="text"]{
display:block;
width:300px;
padding:5px;
margin-bottom:5px;
font-size:1.5em;
}<input type="text" placeholder="text1" class="change">
<input type="text" placeholder="text2">
<input type="text" placeholder="text3">
<input type="text" placeholder="text4" class="change">
<input type="text" placeholder="text5">回答by Cannicide
You could also use a Javascript solution without placeholder to do what you want to do. Here is the code:
您还可以使用没有占位符的 Javascript 解决方案来做您想做的事情。这是代码：
//This fix allows you to change the color to whatever textcolor is while also making text go away when you click on it. However, this fix does not put the temporary placeholder back into the textarea when there is no text inside the input.<input type="text" id="usr" value="Username" onclick="this.value = '';" style="color: red;"/>
<input type="text" id="pwd" value="Password" onclick="this.value = ''; this.type = 'password';" style="color: green;"/>Please not that this fix is a temporary placeholder and should not be used for actual login forms. I would suggest using what @Ayaz_Shah recommended in his answer.
请注意，此修复程序是一个临时占位符，不应用于实际登录表单。我建议使用@Ayaz_Shah 在他的回答中推荐的内容。
回答by Supriya
input::-moz-placeholder {
color: white;
}
input:-moz-placeholder {
color: white;
font-size: 14px !important;
}
*::-webkit-input-placeholder {
color: white;
font-size: 14px !important;
}
*:-ms-input-placeholder {
color: white;
font-size: 14px !important;
}
*:-moz-placeholder {
color: white;
font-size: 14px !important;
}
