纯CSS调整select选择框高度，兼容IE/Firefox/Opera/Safair/Chrome

在IE下直接用height、border定义select没有效果，目前大部分情况都是用js进行模拟，其实css也是可以做得到的，原理很简单，隐藏select选择框的原生边框，再用其他元素模拟内边距及边框就OK了。

首先看一下默认的select在各个浏览器的表现情况。

如下图所示：演示demo

从上图中我们可以看各个浏览器对select的渲染不对高度不一致，连长度也不尽相同，唯一相同的就是边框宽度一致（废话）。下面我们对select进度高宽度行高及字体样式等进行定义，看看有什么情况发生，CSS代码：

.city{width:200px;height:20px;font:normal 12px/20px Tahoma,Geneva,sans-serif;overflow:hidden;}

显示效果：演示demo

在浏览器下select宽度表现相同，高度大部分表现相同，除了Safair，Safair对select渲染的高度为其内部高度，即内部高度(20px)+上下边框高度(4px)=24px，这个如果有需要，可单独对safair设css hack。

@media screen and (-webkit-min-device-pixel-ratio:0){.city{line-height:16px;}}

言归正传，既然统一了select在各个浏览器下的高宽度(200px*20px)，那么接下来的事情就好办了，除去select上下左右各2px的边框，剩下的就是文字部分和下拉箭头部分了，在select外部加一个标签

，设置.select-wrap宽度为196px高度为16px的，多余部分溢出隐藏，此时如果再给select设置margin:-2px 0 0 -2px;，那么select中间部分正好与.city这个div重合，即正好隐藏掉了select的边框。

CSS如下：

.select-wrap{width:196px;height:16px;line-height:16px;overflow:hidden;}
.city{margin:-2px 0 0 -2px;width:200px;height:20px;font:normal 12px/20px Tahoma,Geneva,sans-serif;overflow:hidden;}
@media screen and (-webkit-min-device-pixel-ratio:0){.city{line-height:16px;}} /*for safair*/

显示效果：演示demo

如上图所示，在IE6\IE7下select还有1px的顶部边框，再给select加上float:left;或者display:block;问题就解决了；

隐藏select边框做好了，接下来就是在.select-wrap再加一个标签用来模拟select边框

.select-box{padding:10px;width:196px;border:1px solid #ccc;background:#fff;}
.select-wrap{width:196px;height:16px;line-height:16px;overflow:hidden;}
.city{margin:-2px 0 0 -2px;width:200px;height:20px;font:normal 12px/20px Tahoma,Geneva,sans-serif;overflow:hidden;display:block;}
@media screen and (-webkit-min-device-pixel-ratio:0){.city{line-height:16px;}} /*for safair*/

显示效果：演示demo


至结，全部完成，转载http://www.ghj.name/246.html