在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