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

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