Input框内文字css的控制
为了让input内的文字不要顶头。
空格
最开始用了 作为空格撑开。
但是在<textarea>里面，上边距也是紧贴着上面的。所以考虑用盒子模型或者用定位来控制文字的位置。
用谷歌查关键词：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
http://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css
http://stackoverflow.com/questions/5839270/how-to-set-the-color-of-placeholder-text
也是一样的思路
::-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;
}
对于页面
<div class="banner">
<div class="img-cover"></div>
<div class="img-cover-top">
<form>
<input type="text" name="name" class="input-place" placeholder="your Name"/>
<input type="text" name="phone" class="input-place" placeholder="your Phone"/>
<input type="text" name="email" class="input-place" placeholder="your Email"/>
<textarea name="comment" id="comment" cols="30" rows="5" placeholder=" Write Your Comment Here"></textarea>
<input type="submit" class="submit-btn" value="SEND MESSAGE" />
</form>
</div>
</div>
所以我用了
.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的兼容性，可以用上一种方法。但是考虑兼容性，还是这种方法是折中的办法。
