CSS自定义select下拉选择框(不用其他标签模拟)
2014-03-24 22:07
253 查看
![](http://beyondweb.cn/upload/1378805279244056.jpg)
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方案就是用其他的元素(如ul,li)模拟下拉菜单,或者是使用网上一些现成的插件。
其实select这个东西只靠纯CSS是不能解决这个自定义样式问题的,但既然折腾了这么久,还是说一下CSS实现的思路吧。
首先对于默认的样式:
![](http://beyondweb.cn/admin/upload/20130910/13787999443489.jpg)
刚开始想到使用背景,但经试验对select设置背景是无效的,于是后来就想到了覆盖,用其它元素把那个向下的箭头盖住,然后给这个元素设置背景,写了个demo发现可行,于是就有了下面的这些。
首先用一个a标签套住select:
![](http://beyondweb.cn/admin/upload/20130910/13788019741424.jpg)
![](http://beyondweb.cn/admin/upload/20130910/13788019779894.jpg)
但这样做并不能完全覆盖浏览器的默认样式,如图中下拉框的边框处理不掉,另外,在ie上就更难看了,所以真正项目中使用的话,还是用插件吧,或者用其他元素代替。
到这里,本文并没有完,还要用到一段js,需要把选中的内容放到span标签里显示出来,下面是js代码:
相关文章推荐
- CSS自定义select下拉选择框的样式(不用其他标签模拟)
- CSS自定义select下拉选择框(不用其他标签模拟)
- CSS自定义select下拉选择框的样式(不用其他标签模拟)
- CSS自定义select下拉选择框不用其他标签模拟且兼容多数浏览器
- IE8 模拟其他浏览器标签 http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1"
- 数据抓取中post与get方式的处理深入理解(不用给网页标签赋值也不用模拟提交js)
- 点击精灵区域消除,点击其他区域创建新精灵。(模拟放置炸弹,及引爆)
- csshover.htc 以及简单使用方法(解决IE6下 :hover 在其他标签下无效问题)
- 非常不错的模拟打字效果,目前仅支持纯文本、BR标签、和P标签
- 使用简单标签模拟标签(c:if c:when c:otherwise c:foreach)
- struts2 判断字符串相等和其他struts2标签
- 【Maven+SSM】Mybatis区别于mysql的其他标签
- 为什么要用EL+JSP标签而不用JSP脚本
- C#模拟鼠标键盘控制其他窗口
- 不用其他工具,我们也照样恢复系统(2/2)
- jsp中script标签中的alert在IE下不能弹框,在其他浏览器下可以弹框
- jQuery中mouseout控制div层时受其他标签影响问题
- 【HTML】html中embed标签会遮盖其他部分的解决方法
- a标签之href跳转到页面上的其他位置
- Html-4.其他标签