使用 CSS 更改 HTML5 输入的占位符颜色
Posted
技术标签:
【中文标题】使用 CSS 更改 HTML5 输入的占位符颜色【英文标题】：Change a HTML5 input's placeholder color with CSS 【发布时间】：2011-02-06 07:39:03 【问题描述】：Chrome 支持 input[type=text] 元素上的 placeholder attribute（其他人可能也这样做）。
但下面的 CSS 对占位符的值没有任何作用：
input[placeholder], [placeholder], *[placeholder]
color: red !important;
<input type="text" placeholder="Value">但Value 仍将保留为grey 而不是red。
有没有办法改变占位符文本的颜色？
【问题讨论】：
快速提示（不是解决方案，仅供参考）：如果我没记错的话， input[placeholder] 只匹配具有占位符属性的 标记，它与占位符不匹配属性本身。 是的，我的脑海里闪过一个想法，这可能就像尝试为元素的“标题”属性设置样式一样。所以 +1 的想法相同！ @MathiasBynens :placeholder-shown 伪类匹配显示此类占位符文本的输入元素。 所以它匹配<input> 标签，例如input 选择器，但刚刚显示占位符文本。它也与占位符属性本身不匹配。
@HEX 它不像input 选择器，因为它选择了所有input 元素。 :placeholder-shown 仅选择当前显示占位符的 input 元素，允许您仅设置这些元素的样式，并有效地设置占位符文本的样式。你想说什么？
@HEX（当然，它还选择了显示占位符文本的textarea元素。）
【参考方案1】：
您可能还想设置 textareas 的样式：
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>【讨论】：
【参考方案2】：添加一个非常好的和简单的可能性：CSS filters！
它将为所有内容设置样式，包括占位符。
以下将在同一调色板上设置两个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" />要允许用户动态更改它，使用输入类型颜色进行更改，或查找细微差别，请查看此 sn-p：
发件人：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: whiteChoose 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
【讨论】：
【参考方案3】：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 的回答之外，我还注意到 Chrome 9-10 和 Safari 5 之间的一些 webkit 不一致，支持的 CSS 属性值得注意。
特别是 Chrome 9 和 10 在设置占位符样式时不支持背景颜色、边框、文本装饰和文本转换。
完整的跨浏览器比较是here。
【讨论】：
【参考方案4】：这对于大多数现代浏览器来说都很好
input::placeholder
color: red; // css implementation
以防万一您使用的是 SCSS
input
&::placeholder
color: red; // scss
【讨论】：
【参考方案5】：::placeholder
color: red;
<input type="text" placeholder="Value">很简单
点赞
【讨论】：
【参考方案6】：这段简洁明了的代码：
::-webkit-input-placeholder color: red;
:-moz-placeholder color: red; /* For Firefox 18- */
::-moz-placeholder color: red; /* For Firefox 19+ */
:-ms-input-placeholder color: red;
【讨论】：
【参考方案7】：我刚刚意识到，对于 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 覆盖为 1，这样就好了。
【讨论】：
【参考方案8】：将此 CSS 代码用于所有浏览器工作：
::placeholdercolor:#ccc;
**html**
<input class="form-control" placeholder="write Here..">
【讨论】：
【参考方案9】：<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
【讨论】：
【参考方案10】：试试这个效果
input::placeholder
color:#900009;
【讨论】：
为什么会这样？考虑为您的答案添加一些解释，使其在其他解决方案中脱颖而出。 我错过了输入部分，非常感谢【参考方案11】：此代码将使用 ::placeholder 选择器更改占位符的颜色。
::-webkit-input-placeholder
/* Edge */
color: red;
:-ms-input-placeholder
/* Internet Explorer */
color: red;
::placeholder
color: red;
【讨论】：
【参考方案12】：这是 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;
【讨论】：
【参考方案13】：HTML 的一部分：
<form action="www.anything.com">
<input type="text" name="name"
placeholder="Enter sentence"/>
</form>
我将展示如何通过 CSS 更改“输入句子”的表达颜色：
::placeholder
color:blue;
【讨论】：
【参考方案14】：这个怎么样
<input type="text" value="placeholder text" onfocus="this.style.color='#000';
this.value='';" style="color: #f00;" />没有 CSS 或占位符，但您可以获得相同的功能。
【讨论】：
如果有人在写完东西后再次点击会发生什么......他们写的原始文本将消失！ @LuckySoni 你可以这样做，但我个人更喜欢第一个。<input type="text" value="placeholder text" onfocus="if(!this.haswriting)this.style.color='#000'; this.value='';" onblur="if(!this.value)this.style.color='#f00'; this.value='placeholder text'; this.haswriting=false;elsethis.haswriting=true;" style="color: #f00;"/>
即使您的第二个版本也不提供相同的功能。如果用户使用此输入提交<form>，则占位符文本将被发送到服务器。我看到很多网站都做错了。
这很危险！如果您再次回到表单中，您将失去一切！【参考方案15】：
不同浏览器中特定元素的占位符颜色。
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;
【讨论】：
【参考方案16】：最简单的方法是：
#yourInput::placeholder
color: red;/*As an example*/
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder]
color: red;
【讨论】：
【参考方案17】：/* 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 占位符设置样式。
重要提示：不要将这些规则分组。相反，为每个选择器制定单独的规则（组中的一个无效选择器会使整个组无效）。
【讨论】：
【参考方案18】：您可以将其用于输入和焦点样式：
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+ */
【讨论】：
【参考方案19】：实施
共有三种不同的实现方式：伪元素、伪类和无。
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，但旧的选择器仍然可以工作一段时间。 [Ref]
Internet Explorer 10 和 11 正在使用伪类：:-ms-input-placeholder。 [Ref]
2017 年 4 月：大多数现代浏览器都支持简单的伪元素 ::placeholder [Ref]
Internet Explorer 9 及更低版本根本不支持 placeholder 属性，而 Opera 12 and lower do not support 任何用于占位符的 CSS 选择器。
关于最佳实施的讨论仍在继续。请注意，伪元素就像Shadow DOM 中的真实元素一样。 input 上的 padding 不会获得与伪元素相同的背景颜色。
CSS 选择器
要求用户代理忽略具有未知选择器的规则。见Selectors Level 3:
包含无效选择器的group 选择器无效。
所以我们需要为每个浏览器设置单独的规则。否则，所有浏览器都会忽略整个组。
::-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!">使用说明
小心避免产生不良对比。 Firefox 的占位符似乎默认为降低了不透明度，因此需要在此处使用opacity: 1。
请注意，如果占位符文本不合适，则会将其截断 - 将输入元素的大小设置为 em，并使用较大的最小字体大小设置对其进行测试。不要忘记翻译：某些语言need more room 用于同一个词。
HTML 支持 placeholder 但不支持 CSS 的浏览器（如 Opera）也应进行测试。
某些浏览器对某些input 类型（email、search）使用额外的默认 CSS。这些可能会以意想不到的方式影响渲染。使用 properties -webkit-appearance 和 -moz-appearance 来改变它。示例：
[type="search"]
-moz-appearance: textfield;
-webkit-appearance: textfield;
appearance: textfield;
【讨论】：
【参考方案20】：您可以使用 CSS 更改 HTML5 输入的占位符颜色。如果偶然，您的 CSS 冲突，此代码注释正常工作，您可以使用 (!important)，如下所示。
::-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!">
希望这会有所帮助。
【讨论】：
【参考方案21】：在html文件中：
<input type="text" placeholder="placeholder" class="redPlaceHolder">
在css文件中：
.redPlaceHolder
color: #ff0000;
【讨论】：
【参考方案22】：试试这个
::-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;
【讨论】：
【参考方案23】：<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>
【讨论】：
【参考方案24】：为不同的输入元素不同的样式尝试此代码
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;
【讨论】：
【参考方案25】：试试这个会帮助你这将在你所有喜欢的浏览器中工作：
::-webkit-input-placeholder
/* Chrome/Opera/Safari */
color: pink;
::-moz-placeholder
/* Firefox 19+ */
color: pink;
:-moz-placeholder
/* Firefox 18- */
color: pink;
【讨论】：
【参考方案26】：好的，占位符在不同浏览器中的行为不同，因此您需要在 CSS 中使用浏览器前缀以使其相同，例如 Firefox 默认为占位符提供透明度，因此需要在您的 css 中添加 opacity 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;
【讨论】：
【参考方案27】：如果您使用autoprefixer，请使用新的::placeholder。
请注意，Bootstrap 中的 .placeholder mixin 已弃用，取而代之的是。
例子：
input::placeholder color: black;
当使用 autoprefixer 时，上面的代码将被转换为所有浏览器的正确代码。
【讨论】：
【参考方案28】：对于使用Bourbon的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;
【讨论】：
【参考方案29】：如果您使用Bootstrap 并且无法使其正常工作，那么您可能错过了 Bootstrap 本身添加这些选择器的事实。这就是我们所说的 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;
【讨论】：
【参考方案30】：我已经尝试了这里的所有组合来改变颜色，在我的移动平台上，最终是：
-webkit-text-fill-color: red;
成功了。
【讨论】：
This property allows you to specify a fill color for text. If it is not set, then the color property will be used to do the fill. 在我看来，您有一些其他 CSS 规则正在设置 color 属性。以上是关于使用 CSS 更改 HTML5 输入的占位符颜色的主要内容，如果未能解决你的问题，请参考以下文章