表单美化_html/css_WEB-ITnose

目录 [1]单选按钮 [2]多选按钮 [3]下拉列表

前面的话

　　由于一些系统原生的表单控件在各个浏览器中显示效果不一致，且无法设置某些关键CSS样式，为了保证表单在各浏览器中的兼容性，表单美化就是不得不做的一件事了

 

单选按钮

【实现效果】

【实现过程】

body{    margin: 0;    font: 16px/20px "宋体";}.box{    width: 500px;    height: 100px;    line-height: 100px;    margin: 0 auto;    border: 1px solid black;    text-align: center;}.box label{    position:relative;    padding-left: 20px;}.box input{    visibility: hidden;}    .box i{    position: absolute;    top: -2px;    left: -2px;    height: 19px;    width: 19px;    background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/radiobutton.gif') no-repeat -14px -18px;}.box label:hover{    color: red;}.box label:hover i{    background-position: -14px -118px;}.box label.selected i{    background-position: -14px -218px;}

<div class="box" id="box">    选择一项游戏方式：    <label for="xiu"><i></i>咻一咻</label>    <input id="xiu" type="radio" value="咻一咻">    <label for="yao"><i></i>摇一摇</label>    <input id="yao" type="radio" value="摇一摇">    <label for="niu"><i></i>扭一扭</label>    <input id="niu" type="radio" value="扭一扭"></div><script>var oBox = document.getElementById('box');var aLabel = oBox.getElementsByTagName('label');for(var i = 0, leni = aLabel.length; i < leni; i++){    aLabel[i].onclick = function(){        for(var j = 0,lenj = aLabel.length; j < lenj; j++){            aLabel[j].removeAttribute('class');        }        this.className = 'selected';    }}</script>

 

多选按钮

【实现效果】

【实现过程】

body{    margin: 0;    font: 16px/20px "宋体";}.box{    width: 600px;    height: 100px;    line-height: 100px;    margin: 0 auto;    border: 1px solid black;    text-align: center;}.box label{    position:relative;    padding-left: 20px;}.box input{    visibility: hidden;}    .box i{    position: absolute;    top: -2px;    left: -2px;    height: 19px;    width: 19px;    background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/checkbox.gif') no-repeat -14px -18px;}.box label:hover{    color: red;}.box label:hover i{    background-position: -14px -118px;}.box label.selected i{    background-position: -14px -218px;}

<div class="box" id="box">    选择日常手机交易方式(可多选)：    <label for="a"><i></i>支付宝</label>    <input id="a" type="radio" value="支付宝">    <label for="t"><i></i>微信</label>    <input id="t" type="radio" value="微信">    <label for="b"><i></i>百度钱包</label>    <input id="b" type="radio" value="百度钱包"></div><script>var oBox = document.getElementById('box');var aLabel = oBox.getElementsByTagName('label');for(var i = 0, leni = aLabel.length; i < leni; i++){    aLabel[i].onclick = function(){        if(!this.className){            this.className = 'selected';        }else{            this.removeAttribute('class');        }    }}</script>

 

下拉列表

【实现效果】

【实现过程】

body{    margin: 0;    font: 16px/20px "宋体";}ul{    margin: 0;    padding: 0;    list-style: none;}.box{    width: 300px;    height: 40px;    margin: 0 auto;    border: 1px solid black;}.box .show{    background-color: red;    line-height: 30px;    padding: 5px;}.box .show-area{    color: white;    vertical-align: middle;}.box .show-select{    position: relative;    display: inline-block;    vertical-align: middle;    width: 200px;    height: 28px;    border: 1px solid #999;    background-color: white;    text-indent: 20px;    cursor: pointer;}.box .show-selectAdd{    color: #999;}.box .show-select i{    position: absolute;    height: 0;    width: 0;    top: 0;    right: 0;    margin-top: 12px;    margin-right: 5px;    border: 5px solid transparent;    border-top-color: black;}.box .show-selectAdd i{    border: 5px solid transparent;    border-bottom-color: black;    margin-top: 8px;}.box .list{    border: 1px solid #dfdfdf;    border-top: none;    display: none;}.box .list-in{    height: 30px;    line-height: 30px;    text-indent: 74px;    border-bottom: 1px solid #dfdfdf;        cursor: pointer;}.box .list-in:hover{    color: red;}

<div class="box" id="box">    <div class="show">        <strong class="show-area">地址:</strong>        <span class="show-select">朝阳区<i></i></span>    </div>    <ul class="list">        <li class="list-in">朝阳区</li>        <li class="list-in">海淀区</li>        <li class="list-in">东城区</li>        <li class="list-in">西城区</li>        <li class="list-in">丰台区</li>        <li class="list-in">石景山区</li>    </ul></div><script>var oBox = document.getElementById('box');var oDiv = oBox.getElementsByTagName('div')[0];var oShow = oDiv.getElementsByTagName('span')[0];var oUl = oBox.getElementsByTagName('ul')[0];var aLi = oUl.getElementsByTagName('li');//简单思路//[1]点击oDiv时，默认文字为黑色，三角向上，变成文字为#999，三角向下；简化为增加一个show-selectAdd类名；oUl从隐藏变成显示oDiv.onclick = function(e){    //阻止冒泡    e = e || event;    if(e.stopPropagation){        e.stopPropagation();    }else{        e.cancelBubble = true;    }    oShow.className = 'show-select show-selectAdd';    oUl.style.display = 'block';}//[2]点击oUl的li时，oUl从隐藏变成显示，文字和三角恢复到黑色和向上的默认样式；并且文字内容变成当前点击的li的内容for(var i = 0,len=aLi.length; i < len;i++){    aLi[i].onclick = function(){        oShow.innerHTML = this.innerHTML + '<i></i>';    }}//[3]点击box以外的其他部分时，oUl从隐藏变成显示，文字和三角恢复到黑色和向上的默认样式document.onclick = function(){    this.getElementsByTagName('span')[0].className = 'show-select';    oUl.style.display = 'none';    }</script>