可见，写好一个输入框是非常的简单的，line-height: normal; 只需要写在css reset里即可。
上述的书写方式，来看看其他浏览器的表现：
May 11, 2015
CSS学习：使用HTML、CSS写好一个输入框
1、引子与强迫症
先看图：
如 上图，放大了数倍之后的输入框在无文字和有文字时的光标高度以及对齐方式。以上举例的四个输入框只有百度做的最完美，无无文字时和输入文字时一致对齐，非 常的美观。反观其他3个输入框，做的都不是特别好，只在意在无文字输入时，蓄意放大光标长度，导致输入文字时光标高度不一致。这种输入框在强迫症患者下看 来是无法接受的。
2、光标的高度决定关系
以淘宝输入框为例：
如图中用绿色框中的样式，如文字大小、高度、行高、内边距，这些是影响输入框内部的主要样式（样式参考以chrome浏览器为例）。
chrome浏览器的输入框光标、输入文字、占位符有以下规则：
- 无文字输入时，以行高为准；
- 有文字输入时，以文字大小为准；
- 占位符以行高为准。
因此对淘宝的输入框，只这样设置样式即可：
line-height:normal;
见图：
3、如何写好输入框
- 在书写输入框的时候，如果要增加光标高度，那么最可行的做法是增加文字的大小;
- 输入框的剩余空白使用内边距填充；
- 不要为输入框设置行高，因为浏览器默认会设置行高就会使占位符和输入光标、文字都居中；
- 不要为输入框设置高度，因为已经使用了内边距撑开了，并且现在大多数css库都直接使用边框盒模型。
下面是个例子：
<!DOCTYPE html>
<style>
body{
line-height: 20px;
}
#input1{
font-size: 40px;
padding: 10px;
line-height: normal;
}
</style>
<body>
<input type="text" id="input1" placeholder="input">
</body>
Related Posts
Note: HTML5 识别语音相关的一些资源
10 个超炫酷后台控制面板(附 GitHub下载链接), 免费后台模板
详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing
About Author
