html 输入框 字体,Input框内文字css的控制

Input框内文字css的控制

为了让input内的文字不要顶头。

空格

最开始用了 作为空格撑开。

但是在里面，上边距也是紧贴着上面的。所以考虑用盒子模型或者用定位来控制文字的位置。

用谷歌查关键词：textarea placeholder text place：

https://www.google.com.hk/search?q=textarea+placeholder+text+place&oq=textarea+placeholder+text+place&gs_l=serp.3..33i21k1j33i160k1l2.11271.12563.0.13673.5.5.0.0.0.0.92.385.5.5.0....0...1c.1.64.serp..0.5.383.GSDrhoU7jzQ

伪类：firefox不行

得到关键的两个页面

同一个网站下的

https://css-tricks.com/almanac/selectors/p/placeholder/

https://css-tricks.com/almanac/selectors/p/placeholder-shown/

同样在stack

也是一样的思路

::-webkit-input-placeholder { /* WebKit browsers */

color: #999;

}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */

color: #999;

}

::-moz-placeholder { /* Mozilla Firefox 19+ */

color: #999;

}

:-ms-input-placeholder { /* Internet Explorer 10+ */

color: #999;

}

对于页面


所以我用了

.banner .img-cover-top input::-webkit-input-placeholder { /* Chrome/Opera/Safari */

padding: 7px;

text-indent: 7px;

color: #808080;

}

.banner .img-cover-top input::-moz-placeholder { /* Firefox 19+ */

padding: 7px;

text-indent: 7px;

color: #808080;

}

.banner .img-cover-top input:-ms-input-placeholder { /* IE 10+ */

/*padding-left: 7px;*/

color: #808080;

}

.banner .img-cover-top input:-moz-placeholder { /* Firefox 18- */

color: pink;

}

但是对于firefox的两个版本都没有用。

input{padding-left: 10px}

百度关键词：firefox input padding

搜到张鑫旭的一篇文章

http://www.zhangxinxu.com/wordpress/2012/11/firefox-input-textarea-percent-padding-bug-fixed/

发现可以用以下方法解决问题。

input { padding-left: 10px; }

chrome和firefox都可以解决了。唯一就是该方法会撑大input的block宽度，感觉如果不考虑firefox的兼容性，可以用上一种方法。但是考虑兼容性，还是这种方法是折中的办法。