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

【问题标题】：Change a HTML5 input's placeholder color with CSS使用 CSS 更改 HTML5 输入的占位符颜色
【发布时间】：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元素。）

标签： css html placeholder html-input


【解决方案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: 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

    【讨论】：

      【解决方案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;
}
          &lt;input type="text" placeholder="Value"&gt;

          很简单

          点赞

          【讨论】：

            【解决方案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 代码用于所有浏览器工作：

                 ::placeholder{color:#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;
}
                      • WebKit、Blink （Safari、Google Chrome、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。
                      • Internet Explorer 9 及更低版本根本不支持占位符属性，而 Opera 12 及更低版本不支持任何 CSS 选择器作为占位符。

                      【讨论】：

                        【解决方案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 你可以这样做，但我个人更喜欢第一个。 &lt;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;}else{this.haswriting=true};" style="color: #f00;"/&gt;
                          • 即使您的第二个版本也不提供相同的功能。如果用户使用此输入提交&lt;form&gt;，则占位符文本将被发送到服务器。我看到很多网站都做错了。
                          • 这很危险！如果您再次回到表单中，您将失去一切！
                          【解决方案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;
}
                                  &lt;input placeholder="Stack Snippets are awesome!"&gt;

                                  使用说明

                                  • 小心避免产生不良对比。 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 属性。
                                                        猜你喜欢
                                                        • 2014-08-24
                                                        • 2012-03-16
                                                        • 2018-04-12
                                                        • 1970-01-01
                                                        • 2013-03-08
                                                        • 2020-01-16
                                                        相关资源
                                                        最近更新 更多
                                                        热门标签
                                                        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode