html - 更改选择元素的占位符文本的颜色

Question

根据 stackoverflow 的回答 question 。我向 html select 元素添加了一个占位符。

  <option value="" selected disabled hidden><strong style="color:white">Choose here</strong></option>

现在的问题是，我想将占位符文本的颜色更改为白色，因为我的背景是灰色的。它不接受任何样式。

Answer 1

您可以在 CSS 中使用 ::placeholder 伪值，如下例所示:

::placeholder { color: #fff; }

如果您想要跨浏览器解决方案，可以使用前缀:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}

::placeholder 选择器仅选择输入中的占位符文本，除此之外，您可以在使用 :placeholder-show 显示占位符时设置输入本身的样式>.

此外，请注意，Firefox 显示的占位符文本可能比应显示的更浅。要解决您可以使用的问题:

::-moz-placeholder {
  opacity: 1;
}