css: webkit-input-placeholder 背景颜色

Posted 2023-03-05

【中文标题】css: webkit-input-placeholder 背景颜色

【英文标题】：css: webkit-input-placeholder background color

【发布时间】：2015-01-04 11:03:38

【问题描述】：

尝试设置占位符背景颜色。在我尝试增​​加输入字段高度之前它工作正常。在 mozilla 中，即占位符背景填充输入内的所有空间。但是在 webkit 背景中只设置了占位符文本高度。

这里是一个例子：http://jsfiddle.net/3zp36wL7/2/

::-webkit-input-placeholder  
    color: red;
    background: yellow;

您会在 FF 和 IE 中看到黄色背景，但在 Chrome 或 Safari 中它看起来很糟糕。

有没有通过 css 的解决方案？

【问题讨论】：

你可以给输入一个等于高度的line-height。

【参考方案1】：

您可以使用line-height 代替height；

Fiddle

CSS

 ::-webkit-input-placeholder  
    color: red;
    background: yellow;
 
 :-moz-placeholder  
   color: red;
   background: yellow;
 
 ::-moz-placeholder  
    color: red;
    background: yellow;
 
 :-ms-input-placeholder  
    color: red;
    background: yellow;
 

 input 
    line-height: 50px;
 

【讨论】：

谢谢！这绝对解决了一个问题。但是，如果我不仅想增加行高，还想通过填充将文本向左移动怎么办。再次出现空白空间的同样问题。在 Mozilla/IE 中，占位符没有填充。有任何想法吗？ jsfiddle.net/3zp36wL7/5输入行高：50px；左边距：10px；

我发现只有一个解决方案是这个丑陋的钩子jsfiddle.net/3zp36wL7/7 ...但是光标被占位符覆盖，所以你必须添加自己的。但是我认为使用一些 JS/jQuery 通过检查输入的值来解决这个问题要好得多，如果值为空而不是添加背景...