<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=640,initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no">
<title></title>
<style type="text/css">
html,body{
font-size: 16px;
width:100%;
}
*{
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
padding:0;margin:0;
}
input[type='text'],textarea{
-webkit-appearance: textfield;
-webkit-rtl-ordering: logical;
cursor: text;
border-style: inset;
border-color: initial;
border-image: initial;
display: inline-block;
border:none;
width: 200px;
height: 32px;
line-height: 1.5;
padding: 4px 7px;
font-size: 12px;
border: 1px solid #dddee1;
border-radius: 4px;
color: #495060;
background-color: #fff;
background-image: none;
position: relative;
transition: border .2s ease-in-out,background .2s ease-in-out,box-shadow .2s ease-in-out;
outline:none;
}
textarea{
resize:none
}
/*单选按钮*/
input[type="radio"] + label::before {
content: "\a0"; /*不换行空格*/
display: inline-block;
vertical-align: middle;
font-size: 14px;
width: 16px;
height: 16px;
border-radius: 50%;
text-indent: 3px;
line-height: 1;
background:url(http://www.geekso.com/demo_css/1.gif) no-repeat center 0px;
}
input[type="radio"]:checked + label::before {
background:url(http://www.geekso.com/demo_css/1.gif) no-repeat center -14px;
}
input[type="checkbox"] + label::before {
content: "\a0"; /*不换行空格*/
display: inline-block;
vertical-align: middle;
font-size: 14px;
width: 15px;
height: 15px;
text-indent: 3px;
line-height: 1;
border:solid 1px #DDDEE1;
/* background:url(http://www.geekso.com/demo_css/1.gif) no-repeat center 0px;*/
}
input[type="checkbox"]:checked + label::before {
background-clip: border-box;
/*background:#495060;*/
display: inline-block;
border:solid 1px #495060;
content: "\2714";
/* background:url(http://www.geekso.com/demo_css/1.gif) no-repeat center -14px;*/
}
input[type="radio"]{
visibility: hidden;
}
input[type="checkbox"]{
visibility: hidden;
}
</style>
</head>
<body>
<div>
<div class='header'>
<span >aaaaaaaaaaa</span>
<input type="text" />
</div>
<div style="font-size:0;">
<label style='vertical-align: middle;display: inline-block;'>
<img src='img/one.png' style='height:40px;width:40px;'/>
</label>
<!--<input type="radio" name="" id="" value="11" style='vertical-align: middle;display: inline-block;'/>-->
<textarea name="" rows="" cols="" style='vertical-align: middle;display: inline-block;'></textarea>
</div>
自定义单选美化
<div class="female radio">
<input type="radio" id="female" name="sex" checked/>
<label for="female" onClick="clickRadio()">女</label>
</div>
<div class="male radio">
<input type="radio" id="male" name="sex"/>
<label for="male" onClick="clickRadio()">男</label>
</div>
自定义多选美化
<div class="male radio">
<input type="checkbox" id="male1" name="sex1"/>
<label for="male1" onClick="clickRadio()">男</label>
</div>
<div class="male radio">
<input type="checkbox" id="male2" name="sex1" checked/>
<label for="male2" onClick="clickRadio()">男</label>
</div>
</div>
<script>
function clickRadio(){
console.log(document.getElementsByTagName('input'));
}
</script>
</body>
</html>
