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草稿中输入的占位符::占位符伪元素。
其他回答
我不记得我在哪里找到了这个代码片段(它不是我写的,不记得我是在哪里找到的,也不记得是谁写的)。
$('[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. */
}
这会很好的。此处演示:
input::-webkit输入占位符,textarea::-webkit输入占位符{颜色:#666;}输入:-moz占位符,文本区域:-moz占位符{颜色:#666;}input::-moz占位符,文本区域::-moz占位符{颜色:#666;}input:-ms输入占位符,文本区域:-ms输入占位符{颜色:#666;}<input type=“text”placeholder=“Value”/>
这对大多数现代浏览器都很好
input::placeholder{
color: red; // css implementation
}
以防万一,如果您正在使用SCSS
input {
&::placeholder {
color: red; // scss
}
}
输入::占位符{color:red;}<input-type=“text”placeholder=“value”>
将此CSS代码用于所有浏览器工作:
::placeholder{color:#ccc;}
**HTML**
<input class="form-control" placeholder="write Here..">