本文介绍了如何使用HTML+CSS以及JQuery来美化默认的单选、多选和下拉框。通过CSS实现的方法简单且在主流浏览器中兼容性好，但不支持IE8以下。而JQuery实现的方式则能兼容到IE7，但数据获取相对复杂。文章提供了代码示例和插件下载链接。
大家都知道，默认的单选、多选、下拉控件样式实在是丑哭了。下面小编介绍两种实现单选、多选、下拉控件的样式。首先来介绍第一种：
1.用CSS+HTML实现
这种实现方式是简单，获取数据方便，兼容主流浏览器，缺点就是IE8以及以下的浏览器都不兼容，所以要兼容到更低版本的IE浏览器就需要用到第二种方法了。
首先先看效果图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>表单测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*复选 S*/
/*将input隐藏，设置label标签的背景，替换成checkbox，实现自定义标签样式*/
.checkbox{
width: 100px;height: 80px;float: left;
}
.checkbox01{
display: none;
width: 30px;height: 30px;
}
.checkbox label{
display: block;
width: 80px;height: 40px;
background: url(images/rb01.png) no-repeat left center;
}
/*通过设置checkbox的点击事件实现label的背景图片更换*/
.checkbox01:checked+label{
background: url(images/rb02.png) no-repeat left center;
}
/*复选 E*/
/*单选 S*/
.radio{
width: 100px;height: 80px;float: left;
}
.radio01{
display: none;
width: 30
最低0.47元/天 解锁文章
扫一扫
7452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
