使用CSS更改HTML5输入的占位符颜色

小开

最佳答案

实施

有三种不同的实现：伪元素、伪类和无。

WebKit、Blink（Safari、GoogleChrome、Opera 15+）和Microsoft Edge正在使用伪元素：::-webkit-input-placeholder.^{[参考文献]}
Mozilla Firefox 4到18使用的是伪类：:-moz-placeholder（一个冒号）。^[参考]
Mozilla Firefox 19+使用了一个伪元素：::-moz-placeholder，但旧的选择器仍然可以工作一段时间。^{[参考文献]}
Internet Explorer 10和11使用的是伪类：:-ms-input-placeholder.^{[参考文献]}
2017年4月：大多数现代浏览器都支持简单的伪元素#0^[Ref]

Internet Explorer 9及更低版本根本不支持placeholder属性，而Opera 12及更低版本不支持是占位符的任何CSS选择器。

关于最佳实现的讨论仍在进行中。请注意，伪元素与阴影DOM中的真实元素一样。input上的padding不会获得与伪元素相同的背景颜色。

css选择器

用户代理需要忽略具有未知选择器的规则。请参见选择器级别3：

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

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

::-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;}
::placeholder { /* Most modern browsers support this now. */color:    #909;}

<input placeholder="Stack Snippets are awesome!">

Usage notes

Be careful to avoid bad contrasts. Firefox's placeholder appears to be defaulting with a reduced opacity, so needs to use opacity: 1 here.
Note that placeholder text is just cut off if it doesn’t fit – size your input elements in em and test them with big minimum font size settings. Don’t forget translations: some languages need more room for the same word.
Browsers with HTML support for placeholder but without CSS support for that (like Opera) should be tested too.
Placeholders are no replacement for labels, so make sure you have a label, too
Some browsers use additional default CSS for some input types (email, search). These might affect the rendering in unexpected ways. Use the properties -webkit-appearance and -moz-appearance to change that. Example:

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

小开

除了Toscho的回答之外，我还注意到Chrome9-10和Safari5之间的一些webkit不一致，支持的CSS属性值得注意。

具体来说Chrome9和10在设置占位符样式时不支持background-color、border、text-decoration和text-transform。

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

小开

您可能还需要设置文本区域的样式：

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

<textarea rows="4" cols="50" placeholder="Stack Snippets are nice!"></textarea>

小开

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

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

这将为所有input和textarea占位符设置样式。

重要提示：不要将这些规则分组。相反，为每个选择器创建一个单独的规则（组中一个无效的选择器会使整个组无效）。

小开

这个怎么样

<input type="text" value="placeholder text" onfocus="this.style.color='#000';this.value='';" style="color: #f00;" />

没有CSS或占位符，但您可以获得相同的功能。

小开

在Firefox和Internet Explorer中，正常的输入文本颜色会覆盖占位符的颜色属性。所以，我们需要

::-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;}

小开

我不记得我在互联网上找到了这个代码片段（它不是我写的，不记得我在哪里找到它，也不记得是谁写的）。

$('[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和更少用户，有一个混合.占位符：

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

小开

这将工作得很好演示在这里：

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" />

小开

跨浏览器解决方案：

/* 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; }

图片来源：davidwalsh

小开

对于Bootstrap用户，如果您使用的是class="form-control"，则可能存在CSS特异性问题。您应该获得更高的优先级：

.form-control::-webkit-input-placeholder {color: red;}//.. and other browsers

如果你使用更少：

.form-control{.placeholder(red);}

小开

对于萨斯用户：

// 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);}

小开

现在我们有了一种标准的方法来将CSS应用于输入的占位符：来自这个 CSS模块4级草稿的::placeholder伪元素。

小开

我刚刚意识到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;}

我覆盖了opacity for 1，所以它会很好。

小开

我认为这段代码可以工作，因为只需要输入类型文本的占位符。所以这一行CSS就足以满足您的需求：

input[type="text"]::-webkit-input-placeholder {color: red;}

小开

我尝试了这里的每一个组合来改变颜色，在我的移动平台上，最终是：

-webkit-text-fill-color: red;

成功了。

小开

CSS提供了::placeholder伪元素。

请注意，Bootstrap中的.占位符混合不建议使用。

示例：

input::placeholder { color: black; }

使用自动修复器时，上述代码将转换为适用于所有浏览器的正确代码。

小开

这段简短而干净的代码：

::-webkit-input-placeholder {color: red;}:-moz-placeholder           {color: red; /* For Firefox 18- */}::-moz-placeholder          {color: red; /* For Firefox 19+ */}:-ms-input-placeholder      {color: red;}

小开

如果您使用的是Bootstrap并且无法使其工作，那么您可能错过了Bootstrap本身添加这些选择器的事实。这就是我们正在谈论的Bootstrap v3.3。

如果您尝试更改表单控件 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;}

小开

这里还有一个例子：

.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>

小开

指南针有一个开箱即用的混音。

举个例子：

<input type="text" placeholder="Value">

在使用指南针的SCSS中：

input[type='text'] {@include input-placeholder {color: #616161;}}

有关输入占位符混合的文档。

小开

对于使用波旁威士忌的SASS/SCSS用户，它具有内置功能。

//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;}

小开

好的，占位符在不同的浏览器中表现不同，所以你需要在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;}

小开

试试这个会帮助你这将在你所有的收藏夹浏览器工作：

::-webkit-input-placeholder {/* Chrome/Opera/Safari */color: pink;}::-moz-placeholder {/* Firefox 19+ */color: pink;} :-moz-placeholder {/* Firefox 18- */color: pink;}

小开

针对不同的输入元素尝试此代码不同的样式

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;}

小开

<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;}

小开

在html文件中：

<input type="text" placeholder="placeholder" class="redPlaceHolder">

在css文件中：

.redPlaceHolder{color: #ff0000;}

小开

您可以使用CSS更改HTML5输入的占位符颜色。如果偶然，您的CSS冲突，此代码注释有效，您可以使用（！重要），如下所示。

::-webkit-input-placeholder { /* WebKit, Blink, Edge */color:#909 !important;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:#909 !important;opacity:1 !important;}::-moz-placeholder { /* Mozilla Firefox 19+ */color:#909 !important;opacity:1 !important;}:-ms-input-placeholder { /* Internet Explorer 10-11 */color:#909 !important;}::-ms-input-placeholder { /* Microsoft Edge */color:#909 !important;} <input placeholder="Stack Snippets are awesome!">

希望这能有所帮助。

小开

您可以将其用于输入和焦点样式：

input::-webkit-input-placeholder { color:#666;}input:-moz-placeholder { color:#666;}input::-moz-placeholder { color:#666;}input:-ms-input-placeholder { color:#666;}/* focus */input:focus::-webkit-input-placeholder { color:#eee; }input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */input:focus::-moz-placeholder { color:#eee } /* FF 19+ */input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */

小开

添加一个非常好和简单的可能性：CSS过滤器！
它将为所有内容设置样式，包括占位符。
下面将在同一个调色板上设置两个input元素，使用色调过滤器进行颜色更改。它现在在浏览器中呈现得非常好（ie除外…）
input {filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);}
<input placeholder="Hello world!" /><input type="date" /><br><input type="range" /><input type="color" />
要允许用户动态更改它，使用输入类型颜色进行更改，或查找细微差别，请查看此片段：
来自：coDepen
function stylElem() {stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"out.innerText = e.style.cssText})()} stylElem()
body {background: black; color: white}
Choose a color!<input type="color" id="stylo" oninput="stylElem()"><br><div id="out"></div> <p><input placeholder="Hello world!" /><input type="date" /><br><input type="range" /><br><audio controls src="#"></audio> <br><br><video controls src="#"></video>
css过滤器文档：https://developer.mozilla.org/en-US/docs/Web/CSS/filter

小开

最简单的方法是：

#yourInput::placeholder {color: red;/*As an example*/}/* if that would not work, you can always try styling the attribute itself: */#myInput[placeholder] {color: red;}

小开

不同浏览器中特定元素的占位符颜色。

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;}

小开

超文本标记语言的一部分：

<form action="www.anything.com"><input type="text" name="name"placeholder="Enter sentence"/></form>

我将展示如何通过CSS更改“输入句子”的表达式颜色：

::placeholder{color:blue;}

小开

这里是解决方案css选择器

::-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 { /* Microsoft Edge */color: #909;}

:-ms-input-placeholder { /* Internet Explorer 10-11 */color: #909;}

WebKit，闪烁（Safari，GoogleChrome，Opera 15+）和Microsoft Edge使用伪元素：
::-webkit输入占位符。
Mozilla Firefox 4到18使用了一个伪类：
：-moz占位符（一个冒号）。
Mozilla Firefox 19+使用伪元素：
::-moz占位符，但旧的选择器仍然可以工作一段时间。
Internet Explorer 10和11正在使用伪类：
：-ms-输入-占位符。
Internet Explorer 9和更低版本根本不支持占位符属性，而Opera 12和更低版本不支持占位符的任何CSS选择器。

小开

此代码将使用::placeholder选择器更改占位符的颜色。
::-webkit-input-placeholder {/* Edge */color: red;} :-ms-input-placeholder {/* Internet Explorer */color: red;} ::placeholder {color: red;}

小开

<input type="text" class="input-control" placeholder="My Input">
在head部分添加以下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

小开

试试这个它的工作
input::placeholdercolor:#900009;}

小开

将此CSS代码用于所有浏览器作品：
::placeholder{color:#ccc;} **HTML** <input class="form-control" placeholder="write Here..">

小开

::placeholder{color: red;}
<input type="text" placeholder="Value">

小开

这对于大多数现代浏览器来说都很好
input::placeholder{color: red; // css implementation}
如果您正在使用SCSS
input {&::placeholder {color: red; // scss}}

小开

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;}
html
<input type="text" placeholder="Value" />
107
除了Toscho的回答之外，我还注意到Chrome9-10和Safari5之间的一些webkit不一致，支持的CSS属性值得注意。
具体地说Chrome9和10在样式化占位符时不支持background-Color、边框、文本装饰和文本转换。
完整的跨浏览器比较是这里。

小开

input::placeholder{ color: red; }
<input type="text" placeholder="value">

小开

试试这个css
input::-webkit-input-placeholder { /* Chrome/Opera/Safari */color: #ddd;}input::-moz-placeholder { /* Firefox 19+ */color: #ddd;}input:-ms-input-placeholder { /* IE 10+ */color: #ddd;}input:-moz-placeholder { /* Firefox 18- */color: #ddd;}