脚本宝典收集整理的这篇文章主要介绍了纯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 n
ame="select">
<option>AAAAAAAAAAA</option>
<option>BBBBBBBBBBB</option>
<option selected>CCCCCCCCCCC</option>
<option>DDDDDDDDDDD</option>
</select>
</div>
.select_style {width:240px; h
eight:30px; overflow:hidden; background:url(
../images/arrow.png) no-re
PEat 215px;
border:1px solid
#ccc;
-moz-border-radius: 5px; /* Gecko
browsers */
-
webkit-border-radius: 5px; /* Webk
IT 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*/
}
脚本宝典总结
以上是脚本宝典为你收集整理的纯css为select添加样式(无脚本)实现全部内容,希望文章能够帮你解决纯css为select添加样式(无脚本)实现所遇到的问题。
如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。