纯css为select添加样式(无脚本)实现
导读：收集整理的这篇文章主要介绍了纯css为select添加样式(无脚本 实现，觉得挺不错的，现在分享给大家，也给大家做个参考。 改变select默认的样式，一般情路情况下通过ul,li来模拟来实现。 有很多jquery插件就是通过这样...
收集整理的这篇文章主要介绍了纯css为select添加样式(无脚本)实现，觉得挺不错的，现在分享给大家，也给大家做个参考。 改变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 class="select_style">
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*/
}
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 纯css为select添加样式(无脚本)实现
本文地址： https://pptw.com/jishu/587834.html