html - CSS中更改一个HTML5占位符颜色

  显示原文与译文双语对照的内容

Chrome 支持占位符属性 ( 其他人也可能这么做) input[type=text] 元素。

但是下面的CSS不对占位符的值进行diddly蹲?


 input[placeholder],
 [placeholder],
 *[placeholder] {
 color: red!important;
 }
<input type="text" placeholder="Value"/>

Value 仍然是灰色而不是红色。

有一种方法可以改变占位符文本的颜色?

我已经为不支持占位符属性的浏览器使用了jQuery占位插件。

时间:

实现

有三种不同的实现: pseudo-elements,pseudo-classes和无。

IE 最多 9版和 Opera 版本 12不支持任何用于占位符的CSS选择器。

关于最佳实现的讨论仍在进行中。 注意pseudo-elements行为像阴影DOM中的真实元素。paddinginput 不会pseudo-element得到相同的背景颜色。

CSS选择器

用户代理需要忽略具有未知选择器的规则。 查看选择器级别 3:

包含无效选择器的选择器的无效。

所以我们需要每个浏览器的单独规则。 否则所有的浏览器都会忽略整个组。


::-webkit-input-placeholder {/* WebKit browsers */
 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+ */
 color: #909;
}
<input placeholder="Stack Snippets are awesome!">

用法说明

  • 小心避免不正确的对比。 Firefox的占位符似乎是默认的不透明度,所以需要在这里使用 opacity: 1
  • 请注意,如果占位符文本不匹配,则将它的截断。请在 em 中调整输入元素的大小,并用大的字体大小设置测试它们。 不要忘记翻译:一些语言需要更多的空间,用于同一个单词。
  • placeholder 支持HTML但不支持( 像 Opera )的浏览器也应该测试。
  • 某些浏览器为某些 input 类型使用额外的默认 CSS 。 这些可能会以意想不到的方式影响渲染。 使用属性-webkit-appearance-moz-appearance 来更改。 例如:

 [type="search"] {
 -moz-appearance: textfield;
 -webkit-appearance: textfield;
 appearance: textfield;
 }


/* do not group these rules */
*::-webkit-input-placeholder {
 color: red;
}
*:-moz-placeholder {
/* FF 4-18 */
 color: red;
}
*::-moz-placeholder {
/* FF 19+ */
 color: red;
}
*:-ms-input-placeholder {
/* IE 10+ */
 color: red;
}

<input placeholder='hello'/> <br/>
<textarea placeholder='hello'></textarea>

这将设置所有 inputtextarea 占位符的样式。

重要提示:不组这些规则。 相反,为每个选择器( 组中的一个无效选择器使整个组无效) 创建一个单独的规则。

你可能还需要样式 textareas:


input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
 color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
 color: #636363;
}

除了toscho的回答,我还注意到 Chrome 9 -10和 Safari 5之间的一些 web kit不一致,它们支持CSS属性,值得注意。

特别 Chrome 9和 10在样式化占位器时不支持 background-colorbordertext-decorationtext-transform

完整的跨浏览器 比较在这里是

对于 Bootstrap LESS 用户,有一个 mixin 。占位符:


//Placeholder text
//-------------------------
.placeholder(@color: @placeholderText) {
 &:-moz-placeholder {
 color: @color;
 }
 &:-ms-input-placeholder {
 color: @color;
 }
 &::-webkit-input-placeholder {
 color: @color;
 }
}

在 IE 和中,普通输入文本颜色替代占位符的颜色属性。 所以,我们需要


::-webkit-input-placeholder { 
 color: red; text-overflow: ellipsis; 
}
:-moz-placeholder { 
 color: #acacac!important; text-overflow: ellipsis; 
}
::-moz-placeholder { 
 color: #acacac!important; text-overflow: ellipsis; 
}/* for the future */
:-ms-input-placeholder { 
 color: #acacac!important; text-overflow: ellipsis; 
}

这将工作正常。在这里使用 演示


input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { 
 color: #666;
}
input:-moz-placeholder, textarea:-moz-placeholder { 
 color: #666;
}
input::-moz-placeholder, textarea::-moz-placeholder { 
 color: #666;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { 
 color: #666;
}

跨浏览器 解决方案:


/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; }/* firefox 19+ */
:-ms-input-placeholder { color:#f00; }/* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

信用:David 。

我不记得在互联网( 它不是我写的,不记得我在哪里找到它,也不是写它的人) 上找到了这个代码段的位置。


$('[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,然后通过调用下面的规则来编辑你的占位符:


form. placeholder {
 color: #222;
 font-size: 25px;
/* etc */
}

对于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 (size param is optional)
[placeholder] {
 @include placeholder(red, 10px);
}

...