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

Chrome支持input[type=text]元素的占位符属性（其他元素可能也支持）。

但以下CSS对占位符的值没有任何作用：

输入[占位符]、[占位符]，*[占位符]{颜色：红色！重要的}<input-type=“text”placeholder=“Value”>

但Value仍将保持灰色而不是红色。

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

当前回答

我只是意识到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，这样就很好了。

2015-04-13 23:53:27

其他回答

在html文件中：

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

在css文件中：

.redPlaceHolder{
   color: #ff0000;
}

2017-11-27 19:51:31

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

2013-02-14 21:11:14

试试这个

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

2017-10-23 17:59:12

对于Bootstrap和Less用户，有一个mixin.placeholder：

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

2013-06-06 08:47:46

我只是意识到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，这样就很好了。

2015-04-13 23:53:27

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

推荐文章

最新文章

标签