如何在占位符文本上设置包装背景颜色？

Question

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

更新

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

Answer 1

对于webkit：

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

对于Firefox：

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

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

Answer 3

在css中或直接在代码上：

background-color:#XXXXXX

Answer 4

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