表单美化_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;}

    选择一项游戏方式：    咻一咻    摇一摇    扭一扭    

多选按钮

【实现效果】

【实现过程】

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;}

    选择日常手机交易方式(可多选)：    支付宝    微信    百度钱包    

下拉列表

【实现效果】

【实现过程】

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;}

    
        地址:        朝阳区    
    

朝阳区
        
海淀区
        
东城区
        
西城区
        
丰台区
        
石景山区