2007-11-02

如何用css和div控制html页面中的下拉列表框(select)

关键字: div css select 下拉列表框 样式

        近日在做一个小型项目的时候，发现ie6中不能用css控制select下拉列表框的样子，甚是郁闷，后来google了一番，加上自己的尝试，终于使用外嵌div的方式比较圆满的解决了这个问题，特写此稿，分享自己的心得体会。

        首先，在ff2.0中，对select的样式控制是可以被渲染的，至于mac下的safari会不会渲染对select的样式控制，没有试过，不得而知，仅针对使用最广泛的ff2.0和ie6做了下面一个例子。

        select下拉列表框样式控制的关键就是在其外面嵌套一个div，并控制div边框格式以及其overflow属性，并请注意div和select各自的position属性，这个也很重要哈，大家可反复设置这几个属性的不同取值，做做实验，就明白其中道理了

        大家可以从附件中下载源代码查看。把这段代码保存为一个html文件，分别用ff2.0和ie6浏览，即可得到如下效果：

  • 17694b0f-9a9c-432f-af0e-06482c57d3f8-thumb
  • 描述: ie6下的对比效果
  • 大小: 7.1 KB
  • Eed3e80b-3a3c-4962-9ced-5537778ac764-thumb
  • 描述: firefox2.0下的对比效果
  • 大小: 7.5 KB
评论
bluecrystal 2007-11-02
郁闷，我昨天晚上明明在博客和论坛都发了的，今天早上一来，博客里，这篇文章就没了，吓了我一跳，赶忙跑到论坛一看，还在，又重新编辑了一下，加到自己的博客里了。
而且我昨天是用[code]标签来引用的html代码，都是正常的，今天却完全显示不对了，搞不懂，难道javaeye存在这个bug
发表评论

提醒: 该博客已发表在公共论坛，博客所有留言会成为论坛回贴，留言请注意遵守论坛发贴规则

您还没有登录，请登录后发表评论