开发过程中，我们经常需要在页面中使用input，而一般都会有placeholder做提示，很多时候，设计图中提示的字体颜色、字体背景、字体大小等通常和input中输入的字是不一样的。input输入的字在css直接设置input{...}即可，但是placeholder可通过以下方法来设置，不同浏览器兼容自己注意下前缀。问题来了，在input输入字和placeholder样式不同的时候，乍一看可能没什么问题，当第一次点击输入框的时候，光标的高度和placeholder文字不是一个高度，这看起来就很尴尬了，经过实践发现，以下方法可减轻这种现象，使其看起来比较正常。重点是line-heiht:normal这句话。
<style type="text/css">
::-webkit-input-placeholder{
font-size: 20px;
color: #ff0000;
};
</style>
<input type="text" name="" placeholder="请输入内容" style="height:30px;line-height:normal;font-size: 15px;">
效果如图：
Paste_Image.png
输入内容后：
Paste_Image.png
其他更美观的样式自行设置
网友评论