手机
当前位置:查字典教程网 >网页设计 >XHTML >纯css为select添加样式(无脚本)实现
纯css为select添加样式(无脚本)实现
摘要:改变select默认的样式,一般情路情况下通过ul,li来模拟来实现。有很多Jquery插件就是通过这样的方式来改变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>

<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*/

}

【纯css为select添加样式(无脚本)实现】相关文章:

向div元素添加圆角边框的实现方法

html4和html5区别之如何在一个input上添加焦点实现代码

div图片marquee无缝连接实现代码

漂亮的checkbox样式(多选框)完美兼容IE8/9/10,FF等

ie6下的背景图片缓存

html中css三种常见的样式选择器

html中div不自动换行、强制不换行的具体实现

设置IE8使用IE7的样式的代码

设计师 需要学习编写代码吗

在html中添加script脚本的2种方法和注意事项

精品推荐
分类导航