css: webkit-input-placeholder 背景颜色

Question

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

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

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

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

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

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