Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
Chrome支持input[type=text]元素的占位符属性(其他元素可能也支持)。
但以下CSS对占位符的值没有任何作用:
输入[占位符]、[占位符],*[占位符]{颜色:红色!重要的}<input-type=“text”placeholder=“Value”>
但Value仍将保持灰色而不是红色。
是否有方法更改占位符文本的颜色?
当前回答
将此CSS代码用于所有浏览器工作:
::placeholder{color:#ccc;}
**HTML**
<input class="form-control" placeholder="write Here..">
其他回答
我不记得我在哪里找到了这个代码片段(它不是我写的,不记得我是在哪里找到的,也不记得是谁写的)。
$('[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. */
}
针对不同的输入元素尝试此代码
your css selector::-webkit-input-placeholder { /*for webkit */
color:#909090;
opacity:1;
}
your css selector:-moz-placeholder { /*for mozilla */
color:#909090;
opacity:1;
}
your css selector:-ms-input-placeholder { /*for for internet exprolar */
color:#909090;
opacity:1;
}
示例1:
input[type="text"]::-webkit-input-placeholder { /*for webkit */
color: red;
opacity:1;
}
input[type="text"]:-moz-placeholder { /*for mozilla */
color: red;
opacity:1;
}
input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */
color: red;
opacity:1;
}
示例2:
input[type="email"]::-webkit-input-placeholder { /*for webkit */
color: gray;
opacity:1;
}
input[type="email"]:-moz-placeholder { /*for mozilla */
color: gray;
opacity:1;
}
input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */
color: gray;
}
/*不要将这些规则分组*/*::-webkit输入占位符{颜色:红色;}*:-moz占位符{/*第4-18页*/颜色:红色;不透明度:1;}*::-moz占位符{/*FF 19以上*/颜色:红色;不透明度:1;}*:-ms输入占位符{/*即10+*/颜色:红色;}*::-ms输入占位符{/*Microsoft边缘*/颜色:红色;}*::占位符{/*现代浏览器*/颜色:红色;}<input placeholder=“hello”/><br/><textarea placeholder=“hello”></textarea>
这将设置所有输入和文本区域占位符的样式。
重要提示:不要将这些规则分组。相反,为每个选择器制定一个单独的规则(组中的一个无效选择器将使整个组无效)。
对于Sass用户:
// Create placeholder mixin
@mixin placeholder($color, $size:"") {
&::-webkit-input-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
&:-moz-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
&::-moz-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
&:-ms-input-placeholder {
color: $color;
@if $size != "" {
font-size: $size;
}
}
}
// Use placeholder mixin (the size parameter is optional)
[placeholder] {
@include placeholder(red, 10px);
}
::占位符{颜色:红色;}<input-type=“text”placeholder=“Value”>