美化表单

美化表单的核心思想就是：隐藏原有的input标签！！！

代码一：改变单选的原有的颜色与边框

 

<style type="text/css">

input{
　　display: none;
}       //隐藏原有的input
#wrap label:before{
　　display: inline-block;
　　content: "";
　　width:10px;
　　height:10px;
　　padding:3px;
　　border:1px solid red;
　　border-radius: 50%;
　　vertical-align: middle;
　　margin-right: 4px;
}     //模拟单选框

input[type=radio]:checked+label:before{
　　background:red;
　　background-clip: content-box;     //背景裁切
}

</style>

<div id="wrap">
　　<input type="radio" id="a" name="sex"/>
　　<label for="a">男</label>
　　<input type="radio" id="b" name="sex"/>
　　<label for="b">女</label>
</div>

 

 代码二：改变复选框的勾勾的颜色

<style type="text/css">

input{
　　display: none;
}       //隐藏原有的input

 

#wrap2 {
　　margin-top: 30px;
}
#wrap2 label:before{
　　display: inline-block;
　　content:"";
　　width:16px;
　　height:16px;
　　border:1px solid #000;
　　margin-right:10px;
　　border-radius: 4px;
　　vertical-align: middle;
}   //模拟复选框

#wrap2 input[type=checkbox]:checked+label:before{
　　background:url(img/70.png) center no-repeat;
　　background-size: 12px;
}   //选中的时候改变背景

</style>

<div id="wrap2">
　　<input type="checkbox" id="c"/>
　　<label for="c">同意开通空间</label>
</div>

转载于:https://www.cnblogs.com/fxyg/p/9635424.html