使用CSS更改HTML5input的占位符颜色
Chrome支持input[type=text]元素上的占位符属性 （其他人可能也会这样做）。
但是下面的CSS并没有蹲在占位符的值上：
input[placeholder], [placeholder], *[placeholder] { color: red !important; }
<input type="text" placeholder="Value">
Value将仍然保持grey而不是red 。
有没有办法改变占位符文本的颜色？
履行
有三种不同的实现：伪元素，伪类，什么也没有。
- WebKit，Blink（Safari，Google Chrome，Opera 15+）和Microsoft Edge正在使用伪元素
::-webkit-input-placeholder。 [ Ref ] - Mozilla Firefox 4到18正在使用一个伪类
:-moz-placeholder（ 一个冒号）。 [ Ref ] - Mozilla Firefox 19+使用伪元素
::-moz-placeholder，但旧select器仍然可以使用一段时间。 [ Ref ] - Internet Explorer 10和11正在使用伪类：：
:-ms-input-placeholder。 [ Ref ]
Internet Explorer 9和更低版本根本不支持placeholder属性，而Opera 12和更低版本不支持占位符的任何CSSselect器。
关于最佳实施的讨论仍在继续。 请注意，伪元素在Shadow DOM中的作用与真实元素一样。 input上的padding将不会获得与伪元素相同的背景颜色。
CSSselect器
用户代理需要忽略具有未知select器的规则。 请参阅select器级别3 ：
包含无效select器的一组select器是无效的。
所以我们需要为每个浏览器单独的规则。 否则，整个组将被所有浏览器忽略。
::-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 { /* Internet Explorer 10-11 */ color: #909; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #909; }
<input placeholder="Stack Snippets are awesome!">
/* 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>
您可能还想要样式textareas：
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #636363; } input:-moz-placeholder, textarea:-moz-placeholder { color: #636363; }
对于Bootstrap和Less用户，有一个mixin .placeholder：
// Placeholder text // ------------------------- .placeholder(@color: @placeholderText) { &:-moz-placeholder { color: @color; } &:-ms-input-placeholder { color: @color; } &::-webkit-input-placeholder { color: @color; } }
除了toscho的回答之外，我注意到了Chrome 9-10和Safari 5之间的一些webkit不一致的地方，以及值得注意的CSS属性。
具体来说，Chrome 9和10在设置占位符样式时不支持background-color ， border ， text-decoration和text-transform 。
完整的跨浏览器比较在这里 。
对于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::-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; }
<input type="text" placeholder="Value" />
在Firefox和Internet Explorer中，常规input文本颜色将覆盖占位符的颜色属性。 所以，我们需要
::-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; }
跨浏览器解决scheme：
/* 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; }
信用： 大卫·沃尔什
现在我们有一个标准的方法来将CSS应用到一个input的占位符::placeholder来自这个 CSS模块级别4草案的占位::placeholder伪元素。
如果您使用autoprefixer，请使用new ::placeholder 。
请注意， Bootstrap中的.placeholder mixin已被弃用。
例：
input::placeholder { color: black; }
当使用autoprefixer时，上述内容将被转换为所有浏览器的正确代码。
我只是意识到Mozilla Firefox 19+的东西，浏览器为占位符提供了一个不透明的值，所以颜色不会是你真正想要的。
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #eee; opacity:1; } input:-moz-placeholder, textarea:-moz-placeholder { color: #eee; opacity:1; } input::-moz-placeholder, textarea::-moz-placeholder { color: #eee; opacity:1; } input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #eee; opacity:1; }
我覆盖了1的opacity ，所以这将是很好的去。
我不记得我在互联网上find这个代码片段的位置（这不是我写的，不记得我在哪里find它，也不知道是谁写的）。
$('[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. */ }
我认为这个代码将工作，因为占位符只需要inputtypes的文本。 所以这一行CSS将足以满足您的需求：
input[type="text"]::-webkit-input-placeholder { color: red; }
对于Bootstrap用户，如果您正在使用class="form-control" ，则可能存在CSS特性问题。 你应该得到更高的优先权：
.form-control::-webkit-input-placeholder { color: red; } //.. and other browsers
或者如果您使用较less ：
.form-control{ .placeholder(red); }
这个简洁的代码：
::-webkit-input-placeholder {color: red;} :-moz-placeholder {color: red; /* For Firefox 18- */} ::-moz-placeholder {color: red; /* For Firefox 19+ */} :-ms-input-placeholder {color: red;}
这个怎么样
<input type="text" value="placeholder text" onfocus="this.style.color='#000'; this.value='';" style="color: #f00;"/>
没有CSS或占位符，但你得到相同的function。
我在这里尝试了每个组合来改变颜色，在我的移动平台上，最终它是：
-webkit-text-fill-color: red;
这是诀窍。
如果你正在使用Bootstrap并且无法正常工作，那么你可能会错过Bootstrap本身添加这些select器的事实。 这是我们正在讨论的Bootstrap v3.3。
如果你正在尝试改变.form-control CSS类中的占位符，那么你应该像这样覆盖它：
.form-control::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #777; } .form-control:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #777; opacity: 1; } .form-control::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #777; opacity: 1; } .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #777; }
对于使用波本的 SASS / SCSS用户来说，它具有内置function。
//main.scss @import 'bourbon'; input { width: 300px; @include placeholder { color: red; } }
CSS输出，你也可以抓住这部分并粘贴到你的代码。
//main.css input { width: 300px; } input::-webkit-input-placeholder { color: red; } input:-moz-placeholder { color: red; } input::-moz-placeholder { color: red; } input:-ms-input-placeholder { color: red; }
这里还有一个例子：
.form-control::-webkit-input-placeholder { color: red; width: 250px; } h1 { color: red; }
<div class="col-sm-4"> <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/> </div>
好的，占位符在不同的浏览器中的行为是不一样的，所以你需要在你的CSS中使用浏览器前缀来使它们相同，例如Firefox默认给予占位符透明度，所以需要给你的CSS添加不透明度1，加上颜色，不大多数时候都是大家关心的问题，但是要保持一致：
*::-webkit-input-placeholder { /* WebKit browsers */ color: #ccc; } *:-moz-placeholder { /* Mozilla Firefox <18 */ color: #ccc; opacity: 1; } *::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #ccc; opacity: 1; } *:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #ccc; }
试试这个代码为不同的input元素不同的风格
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; }
这个开箱即用的指南针有一个混合。
举个例子：
<input type="text" placeholder="Value">
而在使用罗盘的SCSS中：
input[type='text'] { @include input-placeholder { color: #616161; } }
请参阅input占位符mixin的文档。
尝试这将帮助你这将在所有你喜欢的浏览器工作：
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: pink; } ::-moz-placeholder { /* Firefox 19+ */ color: pink; } :-moz-placeholder { /* Firefox 18- */ color: pink; }
<style> ::-webkit-input-placeholder { color:red; } ::-moz-placeholder { color:red; } /* firefox 22+ */ :-ms-input-placeholder { color:red; } /* ie10,11 */ input:-moz-placeholder { color:red; } </style>
尝试这个
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: pink; } ::-moz-placeholder { /* Firefox 19+ */ color: pink; } :-ms-input-placeholder { /* IE 10+ */ color: pink; } :-moz-placeholder { /* Firefox 18- */ color: pink; }
