最简单清晰的纯css实现的单选框radio复选框checkbox自定义样式

先上效果图:
这里写图片描述
demo下载链接:
http://download.csdn.net/download/vlilyv/9942113
html框架:
最外层必须有个包裹(我用div)用来设置定位的

<fieldset>
    <legend style="color: red;">自定义单选框radio</legend>
    <div class="login_agree">
        <input type="radio" id="agree_btn">
        <label for="agree_btn"  class="input_agree" style="width: 36%;">同意XXX协议</label>
    </div>
</fieldset>
<fieldset>
   <legend style="color: red;">自定义复选框checkbox</legend>
   <div class="sex_checkbox">
     <input type="checkbox" checked="" id="sex_male" value="1" name="sex"><label for="sex_male"></label>
     <input type="checkbox" id="sex_female" value="0" name="sex"><label for="sex_female"></label>
   </div>
</fieldset>

style:

/*公共部分——按钮样式*/
        label::before {
            content: "";
            display: inline-block;
            width: 20px;
            height: 20px;
            background: #EEE;
            vertical-align: middle;
            -webkit-border-radius: 50%;
            margin-right: 10px;
            -webkit-box-sizing:border-box;
          -webkit-transition:background ease-in .5s
        }
        input[type="checkbox"]:checked+label::before{
            background-color: #6399ae;
            border: 2px #b3b3b3 solid;
        }
        /*自定义单选框radio样式*/
        .login_agree {
            position: relative;
        }
        .login_agree input[type="radio"]{
            display: none;
        }
        .login_agree input[type="radio"]:checked+label::before{
            background-color: #f4d345;
            border: 4px #ccc solid;
        }
        /*自定义复选框checkbox*/
        .sex_checkbox{
            position: relative;
        }
        .sex_checkbox input[type="checkbox"]{
            display: none;
        }

复选框中男女性别的选择用jquery控制二者选其一

/*自定义复选框checkbox需要用js控制,二者只可选择其一*/
$('.sex_checkbox').find('input[type=checkbox]').bind('click', function(){
    $('.sex_checkbox').find('input[type=checkbox]').not(this).attr("checked", false);
});
几个风格好看的CSS3单选复选按钮美化样式简单的表单单选框复选框美化代码。 <!DOCTYPE HTML> <html> <head> <title>好看的CSS3单选复选按钮美化样式</title> <link rel="stylesheet" type="text/css" href="css/style.css?3.1.64" /> </head> <body>[removed][removed] <div id="holder"> <div> <div class="tag">Checkbox Small</div> <input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label> <input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label> <input type="checkbox" id="checkbox-1-3" class="regular-checkbox" /><label for="checkbox-1-3"></label> <input type="checkbox" id="checkbox-1-4" class="regular-checkbox" /><label for="checkbox-1-4"></label> </div> <div> <div class="tag">Checkbox Big</div> <input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" /><label for="checkbox-2-1"></label> <input type="checkbox" id="checkbox-2-2" class="regular-checkbox big-checkbox" /><label for="checkbox-2-2"></label> <input type="checkbox" id="checkbox-2-3" class="regular-checkbox big-checkbox" /><label for="checkbox-2-3"></label> <input type="checkbox" id="checkbox-2-4" class="regular-checkbox big-checkbox" /><label for="checkbox-2-4"></label> </div> <div> <div class="tag">Radio Small</div> <div class="button-holder"> <input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked /><label for="radio-1-1"></label><br /> <input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" /><label for="radio-1-2"></label><br /> <input type="radio" id="radio-1-3" name="radio-1-set" class="regular-radio" /><label for="radio-1-3"></label><br /> <input type="radio" id="radio-1-4" name="radio-1-set" class="regular-radio" /><label for="radio-1-4"></label><br /> </div> </div> <div> <div class="tag">Radio Big</div> <div class="button-holder"> <input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-1"></label><br /> <input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-2"></label><br /> <input type="radio" id="radio-2-3" name="radio-2-set" class="regular-radio big-radio" checked /><label for="radio-2-3"></label><br /> <input type="radio" id="radio-2-4" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-4"></label><br /> <input type="radio" id="radio-2-5" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-5"></label><br /> </div> </div> </div> <div 0; font:normal 14px/24px 'MicroSoft YaHei';">  </div> </body> </html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值