QQ图片20170427205642.png
一.自定义表单控件样式兼容到IE7
1.表单默认样式的兼容问题主要有
- line-height问题，select下拉框IE低版本文字没法居中
- 外边框问题，select下拉框IE低版本存在灰色边框去不掉
- 下拉符小标问题，select下拉框IE和其他版本下拉符号不一致
2.解决思路
在select外面包裹一个div，设置overflow:hidden，让select的宽高大于这个div，从而隐藏灰色边框和下拉符小标。
radio样式透明度为0，js控制点击label改变背景图片。
3.示例代码
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style type="text/css">
body{background: #000;}
form{width:745px ;height:330px ;margin: 0 auto;position: relative;}
input,select{position: absolute;color: #A9A9A9;font-size: 18px;outline: none;font-family: "Microsoft Yahei";}
form div{position: absolute;}
label{position: absolute;color: #fff;font-size: 18px;font-family: "Microsoft Yahei";top: 140px;display: inline-block;}
.label{background: url(images/5_1.png) no-repeat right center;cursor: pointer;}
.label1{left: 62px;}
.label2{left: 200px;}
.label3{left: 332px;}
.label4{left: 485px;}
.label5{left: 600px;}
.name{line-height: 46px;width: 260px;height: 46px;top: 0;left: 0;background: url(images/1.png) no-repeat center top;border: none;padding-left: 57px;}
.phone{line-height: 46px;width: 260px;height: 46px;top: 0;right: 0;background: url(images/2.png) no-repeat center top;border: none;padding-left: 57px;}
.borderNone1{width: 258px;height: 23px;top: 13px;left: 50px;overflow: hidden;}
.borderNone2{width: 258px;height: 23px;top: 13px;left: 50px;overflow: hidden;}
.borderNone3{width: 690px;height: 23px;top: 13px;left: 50px;overflow: hidden;}
.sf{line-height: 23px;width: 283px;height: 27px;margin: -2px;top: 0px;left: 0px;background: transparent;border: transparent;padding-left: 10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.city{line-height: 23px;width: 283px;height: 27px;margin: -2px;top: 0px;left: 0;background: transparent;border: transparent;padding-left: 10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.shop{line-height: 23px;width: 730px;height: 27px;margin: -2px;top: 0px;left:0px;background:transparent;border: transparent;padding-left: 10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
.sfbg{width: 317px;height: 46px;top: 67px;left: 0;background: url(images/3.png) no-repeat center top;}
.citybg{width: 317px;height: 46px;top: 67px;right: 0;background: url(images/4.png) no-repeat center top;}
.shopbg{width: 743px;height: 46px;top: 180px;left: 0;background: url(images/6.png) no-repeat center top;border: none;}
.car{top: 0px;margin-left: 10px;position: relative;opacity: 0;filter:alpha(opacity=0);cursor: pointer;display: inline-block;}
.icon{position: absolute;top: 130px;left:10px;}
.tj{width: 188px;height: 56px;bottom: 0;left: 280px;cursor: pointer;background: url(images/7.jpg) no-repeat center top;border: none;}
</style>
</head>
<body>
<form id="selectN">
<input type="text" data-id="name" class="name" placeholder="请输入姓名" value="">
<input type="text" data-id="mobile" class="phone" placeholder="请输入电话" value="">
<div class="sfbg"><div class="borderNone1"><select class="sf sn" data-id="province" ><option value="">请选择省份</option><option value="">111</option></select></div></div>
<div class="citybg"><div class="borderNone2"><select class="city sn" data-id="city" ><option value="">请选择城市</option><option value="">111</option></select></div></div>
<label class="label label1" for="car1"><span>凌 渡</span><input type="radio" name="car" class="car car1" value="32" id="car1" data-id="model"></label>
<label class="label label2" for="car2"><span>朗 逸</span><input type="radio" name="car" class="car car2" value="34" id="car2" data-id="model"></label>
<label class="label label3" for="car3"><span>桑 塔 纳</span><input type="radio" name="car" class="car car3" value="3" id="car3" data-id="model"></label>
<label class="label label4" for="car4"><span>POLO</span><input type="radio" name="car" class="car car4" value="35" id="car4" data-id="model"></label>
<label class="label label5" for="car5"><span>途 安 L</span><input type="radio" name="car" class="car car5" value="22" id="car5" data-id="model"></label>
<div class="shopbg"><div class="borderNone3"><select class="shop sn" data-id="dealer" ><option value="">请选择经销商</option><option value="">111</option></select></div></div>
<input type="button" name="" class="tj" onclick="regist()" value="">
</form>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".label").each(function(){
$(this).click(function(){
var i=$(".label").index($(this));
$(".label").css("background","url(images/5_1.png) no-repeat right center");
$(".label").css("color","#fff");
$($(".label")[i]).css("color","#ee2018");
$($(".label")[i]).css("background","url(images/5_2.png) no-repeat right center");
})
})
})
</script>
</body>
</html>
二.CSS自定义checkbox,radio样式的方式（不兼容IE8及以下）
- 雪碧图方式
- 伪元素方式
具体可看下面的链接源码
在线预览地址
