如何在占位符文本上设置环绕背景颜色？答案

【问题标题】：How to set wrapping background color on placeholder text?如何在占位符文本上设置环绕背景颜色？
【发布时间】：2023-04-09 16:51:01
【问题描述】：

如何设置占位符背景，如下图蓝色所示？

更新

好吧，输入框的背景可以由::-placeholder设置，但是我们如何让占位符文本的背景颜色不超出文本？

【问题讨论】：

和背景色一样？你试过什么 - 这并不完全清楚......供你参考：Style Placeholder Text
我想这会回答你的问题：stackoverflow.com/questions/2610497/…

标签： css html placeholder

【解决方案1】：

对于 webkit：

#id::-webkit-input-placeholder {background:blue;}

对于火狐：

#id::-webkit-input-placeholder {background:blue;}

【讨论】：

这似乎为整个输入字段的背景着色。如示例图像所示，我如何包装背景颜色以不超出文本？
@Numbers 我不知道如何做到这一点。如果您想像屏幕截图中那样选择文本，您可以使用 javascript select() 函数。

【解决方案2】：

::-webkit-input-placeholder {
   background-color: blue;
}

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

::-moz-placeholder {  /* Firefox 19+ */
   background-color: blue;  
}

:-ms-input-placeholder {  
   background-color: blue;  
}

您还可以为输入设置其他伪元素的样式，例如：

input#thisInput:hover::-webkit-input-placeholder {
   background-color: red;
   color:black;
}

【讨论】：

这似乎为整个输入字段的背景着色。我将如何包装示例图像上的背景颜色？
不知道。 background-size 似乎对这些伪元素没有任何影响。也没有设置宽度

【解决方案3】：

在css中或者直接在代码中：

background-color:#XXXXXX

【讨论】：

【解决方案4】：

您可以使用::placeholder pseudo element，但它是一个非标准元素，并非所有浏览器都支持。

【讨论】：