Input框内文字css的控制

Input框内文字css的控制

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

空格

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

但是在</code>里面，上边距也是紧贴着上面的。所以考虑用盒子模型或者用定位来控制文字的位置。</p> <p>用谷歌查关键词：<code>textarea placeholder text place</code>：</p> <pre><code class="html">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 </code></pre> <h2>伪类：firefox不行</h2> <p>得到关键的两个页面</p> <p>同一个网站下的</p> <pre><code class="python">https://css-tricks.com/almanac/selectors/p/placeholder/ </code></pre> <pre><code class="python">https://css-tricks.com/almanac/selectors/p/placeholder-shown/ </code></pre> <p>同样在stack</p> <p>http://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css</p> <p>http://stackoverflow.com/questions/5839270/how-to-set-the-color-of-placeholder-text</p> <p>也是一样的思路</p> <pre><code class="python"> ::-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; } </code></pre> <p>对于页面</p> <pre><code class="python"><div class="banner"> ![](images/banner3.jpg) <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">

所以我用了

.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的兼容性，可以用上一种方法。但是考虑兼容性，还是这种方法是折中的办法。