主页 > 知识库 > 纯css为select添加样式(无脚本)实现

纯css为select添加样式(无脚本)实现

热门标签:最简单的百度地图标注店铺 禹州电话外呼系统 梧州地图标注app AI外呼系统 价格 新乡机器人外呼系统 锦州企业外呼系统 水经注万能地图标注 青海保险智能外呼系统商家 营口400电话申请
改变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*/
}

标签:荆门 怀化 延边 昭通 青岛 哈密 山南 潮州

巨人网络通讯声明:本文标题《纯css为select添加样式(无脚本)实现》,本文关键词  纯,css,为,select,添加,样式,;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 下面列出与本文章《纯css为select添加样式(无脚本)实现》相关的同类信息!
  • 本页收集关于纯css为select添加样式(无脚本)实现的相关信息资讯供网民参考!
  • 推荐文章