select 样式

引用:http://www.w3cfuns.com/thread-5592120-1-1.html

作品类型：其他类型作品
作品描述：解决select不能被遮盖和不能设置边框背景补白等样式的问题
制作思路：使用htc文件动态脚本修复，从而使使用者只需一行CSS就能搞定问题
本帖最后由 gucong 于 2012-5-3 18:05 编辑
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>select</title>
  6. <style type="text/css">
  7. select {
  8.     border: 1px solid #ccc;
  9.     background: none;
  10.     padding: 4px 5px;
  11.     outline: none;
  12.     color: #333;
  13.     *behavior: url(select.htc);
  14. }
  15. select:focus {
  16.     border-color: #79c0f2;
  17. }
  18. </style>
  19. </head>
  21. <body>
  22. <select>
  23.     <option>select</option>
  24. </select>
  25. </body>
  26. </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-5-3 更新，修正select为display:none或visibility:hidden时，边框依然显示。select使用js动态添加选项时，显示内容会得到更新。修正js调用blur()方法后focus样式依然没有消失的问题。修正文字可能存在的自动换行问题。
posted @ 2013-02-21 10:21  镇水古月  阅读(609)  评论(0)  编辑  收藏  举报