论坛首页 Web前端技术论坛

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

浏览 8870 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-11-02  
CSS

        近日在做一个小型项目的时候,发现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浏览,即可得到如下效果:

  • 描述: ie6下的对比效果
  • 大小: 7.1 KB
  • 描述: firefox2.0下的对比效果
  • 大小: 7.5 KB
   发表时间:2007-11-02  
郁闷,我昨天晚上明明在博客和论坛都发了的,今天早上一来,博客里,这篇文章就没了,吓了我一跳,赶忙跑到论坛一看,还在,又重新编辑了一下,加到自己的博客里了。
而且我昨天是用标签来引用的html代码,都是正常的,今天却完全显示不对了,搞不懂,难道javaeye存在这个bug
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics