解决select不能被遮盖和不能设置边框背景补白
|
admin
2012年4月30日 1:36
本文热度 2621
|
霸气宣言：select终极解决方案 |
作品类型：其他类型作品 |
作品描述：解决select不能被遮盖和不能设置边框背景补白等样式的问题 |
制作思路：使用htc文件动态脚本修复，从而使使用者只需几行CSS就能搞定问题 |
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>select</title>
<style type="text/css">
select {
border: 1px solid #ccc;
background: none;
padding: 4px 5px;
outline: none;
color: #333;
*behavior: url(select.htc);
}
select:focus {
border-color: #79c0f2;
}
</style>
</head>
<body>
<select>
<option>select</option>
</select>
</body>
</html>
这是我们测试用的页面，请将它复制并保存为html文件。
然后下载附件，将select.htc放在与html相同的文件夹中
然后你就可以看到效果了。
对于不理解IE下Select的Bug的同学，可以删除select.htc后使用IE6、7查看demo页，以便查看区别
点击此处查看demo
下载select.htc
2012-4-21 更新，支持自定义边框颜色，解决服务器环境下无法更新select显示内容的bug
2012-4-22 更新，支持自定义小三角颜色(使用scrollbar-arrow-color定义)，优化更新select显示内容时的效率，增加focus状态下样式，美化了背景色不为白色时IE7下的效果，解决了IE6中select在focus时即使没有hover也不能滚顿页面的bug。
2012-4-25 更新，支持透明背景或任意其他颜色背景的select。
该文章在 2012/4/30 1:36:57 编辑过
400 186 1886
