Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
当前回答
您还可以设置文本区域的样式:
input::-webkit输入占位符,textarea::-webkit输入占位符{颜色:#FF9900;}输入:-moz占位符,文本区域:-moz占位符{颜色:#FF9900;}<textarea rows=“4”cols=“50”placeholder=“堆栈代码段很好!”></text区域>
其他回答
我不记得我在哪里找到了这个代码片段(它不是我写的,不记得我是在哪里找到的,也不记得是谁写的)。
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
}
})
});
只需加载此JavaScript代码,然后通过调用以下规则使用CSS编辑占位符:
form .placeholder {
color: #222;
font-size: 25px;
/* etc. */
}
对于Bootstrap和Less用户,有一个mixin.placeholder:
// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
&:-moz-placeholder {
color: @color;
}
&:-ms-input-placeholder {
color: @color;
}
&::-webkit-input-placeholder {
color: @color;
}
}
在html文件中:
<input type="text" placeholder="placeholder" class="redPlaceHolder">
在css文件中:
.redPlaceHolder{
color: #ff0000;
}
不同浏览器中特定元素的占位符颜色。
HTML
<input class='contact' type="email" placeholder="majed@firefly.com">
CSS
.contact::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: pink;
}
.contact::-moz-placeholder { /* Firefox 19+ */
color: pink;
}
.contact:-ms-input-placeholder { /* IE 10+ */
color: pink;
}
.contact:-moz-placeholder { /* Firefox 18- */
color: pink;
}
<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