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

所属分类: 网页制作 / HTML/Xhtml 阅读数: 136
收藏 0 赞 0 分享
改变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*/
}
更多精彩内容其他人还在看

XHTML三种文件类型声明

XHTML定义了三种文件类型声明。 最普遍使用的是XHTML Transitional。 <!DOCTYPE>是强制使用的。 一个XHTML文档有三个主要的部分: DOCTYPE Head Body ... 查看详情
收藏 0 赞 0 分享

通过实例掌握BR和P标签的区别

换行标记<br>的使用 换行标记<br>是一个没有结尾的标记,HTML文件中任何位置只要使用了<br>标记,当文件显示在浏览器中时,该位置之后的文字将显示于下一行,该<br>标记就是起到换行的标记! 请注意!在一般的文字文件... 查看详情
收藏 0 赞 0 分享

网页设计制作之改进超级链接效果

Hyperlinks enable people to jump instantly from page to page, or site to site. Such power can create anxiety. 超链接可以使访问者从一个页面跳转至另外一个页面,或从一个... 查看详情
收藏 0 赞 0 分享

网页表格或div层在网页中被撑开解决之道

在我们设计网页的时候,总会遇到一些不愉快的事情,最常见的莫过于在后台添加内容后才发现显示的页面被撑开,导致网页极度不美观。以前大家基本上都是设计表格,网上自然不少对于的解决方法,如今还有div css标准设计,很少看到相关好的方法,现在潇湘在线把平时找到的防止表格被撑开的好方法总... 查看详情
收藏 0 赞 0 分享

超链接图标规范:提升文章的可阅读性

1、什么是超链接图标规范超链接图标规范是根据《Iconize Textlinks with CSS》修改调整完成的。主要是整理出常用到的一些icon,整合成一张图片,减少图片的服务器请求次数。通过这套css framework,给链接文件的类型加上icon标识。提升文章的可阅读性... 查看详情
收藏 0 赞 0 分享

网页设计之网页音乐的实现技巧

当网页中插入音乐时,要根据不同的后缀名,来写不同的代码!下面面就是多种格式文件的详细使用代码。 注: "音乐文件和地址"——待播放文件的文件名,前面带上绝对路径,或者本站的相对路径。  width_num—&m... 查看详情
收藏 0 赞 0 分享

XHTML常用标签介绍

一段时间以来,发现有很多人XHTML都不会用,不光是普通的初学者,有的程序员都不是很清楚该怎么写这个XHTML,我这里呢算是把一些常见的应用问题做一个总结,也算能使得大家能在沟通,合作上能形成默契。 XHTML里有很多的标签,但是经常用到的也就是那么几个,也只要掌握这几个也... 查看详情
收藏 0 赞 0 分享

HTML网页图片标记

插入图片标记<IMG> 今天看到的丰富多彩的网页,都是因为有了图像的作用。想一想过去,网络中全部都是纯文本的网页,非常枯燥,就知道图像在网页设计中的重要性了。在html页面中可以插入图像,网页常用的图像格式有JPEG和GIF两种: JPEG(Joint Pho... 查看详情
收藏 0 赞 0 分享

网页表单设计实例技巧五则

1、表单文本输入的移动选择:在文本输入栏中,如果加入了提示,来访者往往要用鼠标选取后删除,再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到 <t... 查看详情
收藏 0 赞 0 分享

HTML网页列表标记学习教程

HTML网页列表标记学习教程. 在html页面中,列表可以起到提纲写领的作用。列表分为两种类型,一是有序列表,一是无序列表。前者用项目符号来标记无序的项目,而后者则使用编号来记录项目的顺序。 所谓有序,指的是按照数字或字母等顺序排列列表项目。 ... 查看详情
收藏 0 赞 0 分享
查看更多