| 标题 | 纯css为select添加样式(无脚本)实现 |
| 内容 | 改变select默认的样式，一般情路情况下通过ul,li来模拟来实现;Jquery插件也是这样,接下来介绍一种不写脚本，只用单纯的css来实现。在IE系列下，选中某个选项的时候会有背景色块，IE7-IE10都有此bug，感兴趣的朋友可以参考下 改变select默认的样式，一般情路情况下通过ul,li来模拟来实现。 有很多Jquery插件就是通过这样的方式来改变select默认样式的。 根据程序哥哥那边的反映，此种方式在form提交后无法获取数据，后来经过实验，用了不同的JS/Jquery插件，都是同样的结果：无法获取数据。 后来看一篇外国人写的 博客，用css的样式来实现 在select外面添加一个div，设置select的宽度小于父级div的宽度，然后通过设置div的background属性，改变select默认箭头的样式。 此种方法不失为一个好方法，不写脚本，只用单纯的css来实现。 不过这种方法也是有瑕疵的，就是在IE系列下，选中某个选项的时候会有背景色块，IE7-IE10都有此bug。 在Opera下，设置div的背景图不显示，也就是select的下拉箭头不显示，这个不知道是什么原因所致。 代码如下: <div> <select name="select"> <option>AAAAAAAAAAA</option> <option>BBBBBBBBBBB</option> <option selected>CCCCCCCCCCC</option> <option>DDDDDDDDDDD</option> </select> </div> 代码如下: .select_style {width:240px; height:30px; overflow:hidden; background:url(../images/arrow.png) no-repeat 215px; border:1px solid #ccc; -moz-border-radius: 5px; /* Gecko browsers */ -webkit-border-radius: 5px; /* Webkit browsers */ border-radius:5px; } .select_style select { padding:5px; background:transparent; width:268px; font-size: 16px; border:none; height:30px; -webkit-appearance: none; /*for Webkit browsers*/ } |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。