Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
当前回答
现在,我们有了一种标准的方法来将CSS应用于这个CSS模块Level 4草稿中输入的占位符::占位符伪元素。
其他回答
您可以将其用于输入和焦点样式:
input::-webkit-input-placeholder { color:#666;}
input:-moz-placeholder { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */
::占位符{颜色:红色;}<input-type=“text”placeholder=“Value”>
您还可以设置文本区域的样式:
input::-webkit输入占位符,textarea::-webkit输入占位符{颜色:#FF9900;}输入:-moz占位符,文本区域:-moz占位符{颜色:#FF9900;}<textarea rows=“4”cols=“50”placeholder=“堆栈代码段很好!”></text区域>
以下是CSS选择器的解决方案
::-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 { /* Microsoft Edge */
color: #909;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
}
WebKit、Blink(Safari、Google Chrome、Opera 15+)和Microsoft Edge使用了伪元素:::-webkit输入占位符。Mozilla Firefox 4到18使用了一个伪类::-moz占位符(一个冒号)。Mozilla Firefox 19+使用了一个伪元素:::-moz占位符,但旧选择器仍将工作一段时间。Internet Explorer 10和11正在使用伪类::-ms输入占位符。InternetExplorer9及更低版本根本不支持占位符属性,而Opera12及更低版本不支持任何占位符CSS选择器。
<input type="text" class="input-control" placeholder="My Input">
在头部添加以下CSS。
<style type="text/css">
.input-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: red !important;
opacity: 1; /* Firefox */
}
.input-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red !important;
}
.input-control::-ms-input-placeholder { /* Microsoft Edge */
color: red !important;
}
</style>
以下是参考链接。https://www.w3schools.com/howto/howto_css_placeholder.asp