自定义表单控件样式

作者: Maxine708 | 来源:发表于2017-04-27 21:30 被阅读0次

自定义表单控件样式
随笔小记
Quartz2D(一)之简单介绍
CSS自定义控件之checkbox控件
from 表单上传图片
H5常用标签和属性
Bootstrap表单元素
Flask_wtf设置控件宽度
UITextField
WPF中ControlTemplate和DataTemplate

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>
    ![](images/5.png)
    <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>