关于html：使用CSS更改HTML5输入的占位符颜色


Change an HTML5 input's placeholder color with CSS

chrome支持input[type=text]元素的placeholder属性(其他元素也可能支持)。

但以下EDOCX1[1]对占位符的值没有任何影响：

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

Value仍将保留grey而不是red。

是否有方法更改占位符文本的颜色？

相关讨论

实施

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

  • Webkit、Blink(Safari、Google Chrome、Opera 15+)和Microsoft Edge使用的是一个伪元素：::-webkit-input-placeholder。[参考文献]
  • MozillaFireFox4到18使用的是一个伪类：:-moz-placeholder(一个冒号)。[参考文献]
  • Mozilla Firefox 19+使用的是一个伪元素：::-moz-placeholder，但旧的选择器仍将工作一段时间。[参考文献]
  • InternetExplorer 10和11使用的是一个伪类：:-ms-input-placeholder。[参考文献]
  • 2017年4月：大多数现代浏览器支持简单的伪元素::placeholder【参考】

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

关于最佳实现的讨论仍在继续。注意，伪元素在阴影DOM中的作用与真实元素类似。input上的padding不会得到与伪元素相同的背景色。

CSS选择器

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

a group of selectors containing an invalid selector is invalid.

所以我们需要为每个浏览器分别设置规则。否则，所有浏览器都会忽略整个组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
::-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;
}
1
<input placeholder="Stack Snippets are awesome!">

使用说明

  • 小心避免对比度差。firefox的placeholder看起来是默认的，透明度降低了，所以需要在这里使用opacity: 1。
  • 请注意，如果占位符文本不适合，则只会将其切断—在em中调整输入元素的大小，并使用大的最小字体大小设置对其进行测试。不要忘记翻译：有些语言需要更多的空间来容纳同一个单词。
  • 对支持placeholder但不支持css(如opera)的浏览器也应该进行测试。
  • 有些浏览器对某些input类型(email和search使用附加的默认css。这些可能以意想不到的方式影响渲染。使用属性-webkit-appearance和-moz-appearance来更改。例子：
1
2
3
4
5
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }
相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 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;
}
1
2
<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>

这将是所有input和textarea占位符的风格。

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

相关讨论

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

1
2
3
4
5
6
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}
相关讨论

对于引导程序和较少的用户，有一个mixin.placeholder：

1
2
3
4
5
6
7
8
9
10
11
12
13
// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}
相关讨论

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

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

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

对于SASS用户：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 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);
}
相关讨论

这样就行了。演示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;
}
1
<input type="text" placeholder="Value" />

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
::-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;
}

跨浏览器解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 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; }

学分：大卫·沃尔什

如果使用autoprefixer，请使用新的::placeholder。

请注意，不推荐使用bootstrap中的.placeholder mixin。

例子：

1
input::placeholder { color: black; }

使用autoprefixer时，上述代码将转换为所有浏览器的正确代码。

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

相关讨论

我刚刚意识到Mozilla Firefox 19+的浏览器为占位符提供了一个不透明度值，因此颜色将不是您真正想要的颜色。

1
2
3
4
5
6
7
8
9
10
11
12
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，所以最好是走了。

我不记得我在网上找到这个代码片段的地方(它不是我写的，不记得我在哪里找到的，也不记得是谁写的)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('[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编辑占位符：

1
2
3
4
5
form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc. */
}
相关讨论

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

1
2
3
input[type="text"]::-webkit-input-placeholder {
    color: red;
}
相关讨论

对于引导程序用户，如果您使用的是class="form-control"，那么可能存在一个CSS特殊性问题。您应该获得更高的优先级：

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

或者如果你用的更少：

1
2
3
.form-control{
    .placeholder(red);
}

这个怎么样？

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

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

相关讨论

如果您正在使用引导程序，但无法使其正常工作，那么您可能错过了引导程序本身添加这些选择器的事实。这是我们正在讨论的引导程序v3.3。

如果试图更改.Form控件CSS类中的占位符，则应按如下方式重写它：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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;
}

简明扼要的代码：

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

在我的移动平台上，我尝试了所有的组合来改变颜色，最终它是：

1
-webkit-text-fill-color: red;

这就成功了。

相关讨论

尝试将此代码用于不同的输入元素不同的样式

1
2
3
4
5
6
7
8
9
10
11
12
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：

1
2
3
4
5
6
7
8
9
10
11
12
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：

1
2
3
4
5
6
7
8
9
10
11
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;
   }

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

1
2
3
4
5
6
7
8
9
10
//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

CSS输出，你也可以抓取这部分并粘贴到你的代码中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//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;
}

这里还有一个例子：

1
2
3
4
5
6
7
.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
}
h1 {
  color: red;
}
1
  <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>

添加一个真正的非常好和简单的可能性：CSS过滤器！

enter image description here

enter image description here

enter image description here

它将设置所有内容的样式，包括占位符。

下面将在同一调色板上设置两个输入，使用色调过滤器进行颜色更改。它现在在浏览器中表现得很好(除IE…)

1
2
3
input {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);
}
1
2
3
4
<input placeholder="Hello world!" />
<input type="date" />
<input type="range" />
<input type="color" />

要允许用户动态更改，使用输入类型颜色进行更改，或查找细微差别，请查看以下代码段：

发件人：https://codepen.io/nico_krazhtest/pen/bwexeb

1
2
3
4
5
6
7
8
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()
1
2
3
4
5
6
7
8
9
10
 <p>

  <input placeholder="Hello world!" />
  <input type="date" />
  <input type="range" />
  <input type="color" />
Colors (change me)->
<input type="color" id="stylo" oninput="stylElem()" />
</audio>  
<video controls src="#"></video>

CSS过滤器文档：https://developer.mozilla.org/en-us/docs/web/css/filter

好的，占位符在不同的浏览器中的行为不同，因此您需要在CSS中使用浏览器前缀使它们相同，例如，默认情况下，firefox为占位符提供透明度，因此需要在CSS中添加不透明度1，加上颜色，这在大多数情况下不是一个大问题，但保持它们一致性很好：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
*::-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;
}

您可以使用CSS更改HTML5输入的占位符颜色。如果碰巧，你的CSS冲突，这个代码说明工作，你可以使用(！重要)如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
::-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!">

希望这会有所帮助。

最简单的方法是：

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

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

1
2
3
4
5
6
7
8
9
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+ */

指南针有一个现成的混音器。

举个例子：

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

在SCSS中使用罗盘：

1
2
3
4
5
input[type='text'] {
  @include input-placeholder {
    color: #616161;
  }
}

有关输入占位符混合的信息，请参阅文档。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
HTML

<input class='contact' type="email" placeholder="[email protected]">

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

尝试此操作将帮助您在所有FAV浏览器中工作：

1
2
3
4
5
6
7
8
9
10
11
12
13
::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
      color: pink;
    }
    ::-moz-placeholder {
    /* Firefox 19+ */
      color: pink;
    }

    :-moz-placeholder {
    /* Firefox 18- */
      color: pink;
    }

在HTML文件中：

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

在CSS文件中：

1
2
3
.redPlaceHolder{
   color: #ff0000;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<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>

试试这个

1
2
3
4
5
6
7
8
9
10
11
12
::-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;
}