zoukankan      html  css  js  c++  java
  • 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>
    20. <body>
    21. <select>
    22.     <option>select</option>
    23. </select>
    24. </body>
    25. </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样式依然没有消失的问题。修正文字可能存在的自动换行问题。
  • 相关阅读:
    Ubuntu中用户名密码和root密码修改
    在Python中,输出格式:%d , %6d , %-6d, %06d , %.6f的一些区分
    定制的print()输出格式
    python编程系列---Pycharm快捷键(更新中....)
    webbrowser控件——Windows下的开发利器
    Windows读写文件的猫腻
    根据GUID获取设备信息
    转:APDU命令格式
    VC中添加消息响应函数
    VC 取消warning
  • 原文地址:https://www.cnblogs.com/sode/p/2920090.html
Copyright © 2011-2022 走看看