手揣网教程：绿色安全纯净官方版,体验当今速度最快的浏览器！

css为select添加样式(无脚本)完成

时间：2024/10/27作者：未知来源：手揣网教程人气：

[摘要]改变select默认的样式，一般情况下通过ul,li来模拟来实现。 有很多Jquery插件就是通过这样的方式来改变select默认样式的。 根据程序哥哥那边的反映，此种方式在form提交后无法获取数...
改变select默认的样式，一般情况下通过ul,li来模拟来实现。 有很多Jquery插件就是通过这样的方式来改变select默认样式的。
根据程序哥哥那边的反映，此种方式在form提交后无法获取数据，后来经过实验，用了不同的JS/Jquery插件，都是同样的结果：无法获取数据。

后来看一篇外国人写的 博客，用css的样式来实现 在select外面添加一个div，设置select的宽度小于父级div的宽度，然后通过设置div的background属性，改变select默认箭头的样式。 此种方法不失为一个好方法，不写脚本，只用单纯的css来实现。

不过这种方法也是有瑕疵的，就是在IE系列下，选中某个选项的时候会有背景色块，IE7-IE10都有此bug。
在Opera下，设置div的背景图不显示，也就是select的下拉箭头不显示，这个不知道是什么原因所致。

html代码：

<div class="select_style"> 
<select name="select"> 
<option>AAAAAAAAAAA</option> 
<option>BBBBBBBBBBB</option> 
<option selected>CCCCCCCCCCC</option> 
<option>DDDDDDDDDDD</option> 
</select> 
</div>

CSS代码：

.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*/ 
}
以上就是css为select添加样式(无脚本)实现的详细内容，更多请关注php中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：css为select添加样式(无脚本)完成



Copyright © 2012-2018 手揣网教程(http://www.shouchuai.com) .All Rights Reserved 网站地图 友情链接

免责声明：本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除，敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版