placeholder background color

Try to set placeholder background color. It works fine until i try to increase input field height. In mozilla & ie placeholder background fills all space inside input. But in webkit background is set only for placeholder text height.

Here is an example: http://jsfiddle.net/3zp36wL7/2/

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

You'll see yellow background in FF & IE, but in Chrome or Safari it looks terrible.

Is there any solution via css?

---

You can use line-height instead 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;
 }

链接地址: http://www.djcxy.com/p/70530.html

上一篇: 如何从输入文本中删除底线

下一篇: 占位符背景颜色