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

15 浏览
0 Comments

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

这个问题已经在此处有答案了:

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

根据stackoverflow上的一个问题的回答，我为html选择元素添加了一个占位符。

Choose here

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

\"enter

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

这是谷歌材料设计吗？
如果是谷歌材料设计，我认为这个答案是你的解决方案，我不想拿别人的努力来争功，所以这里是链接点击这里
如果这不是材料设计，你尝试过这个了吗？

::placeholder {
  color: white;
}

它叫做伪元素，你可以在这里了解它们这里
我写的例子是从这里拿来的这里

0
0 Comments

你可以使用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;
}

0