纯css写单选框和复选框的样式和功能

只用纯css写的单选框和复选框的样式和功能该怎么写?看这里,复制下面的代码运行一遍就知道了,快试试吧!

效果截图:
图片描述

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <title>移动单选按钮</title>
    <link rel="stylesheet" type="text/css" href="http://dn.yun******.com/css/reset-min.css">
    <style>
        /*纯CSS写法*/
        .checkbox-group input{display:none;opacity:0;}
        .checkbox-group input[type=checkbox]+label, .checkbox-group input[type=radio]+label {
            line-height: 1;
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            /*cursor: pointer;*/
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            margin:2px;
        }
        .checkbox-group input[type=checkbox]+label:before, .checkbox-group input[type=radio]+label:before {
            line-height: 20px;
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 8px;
            content: '';
            color: #fff;
            border: 1px solid #dce4e6;
            background-color: #f3f6f8;
            border-radius: 3px;
        }
        .checkbox-group input[type=checkbox]:checked+label:before,.checkbox-group input[type=radio]:checked+label:before{
            /*content:'\2022';圆点*/
            content:'\2713';
            color:#fff;
            background-color: #31b968;
            border-radius: 3px;
            font-size:16px;
            text-align: center;
            border-color: #31b968;
        }
        /*使用背景图片写法*/
        .xuan-group input{display:none;opacity:0;}
        .xuan-group input[type=checkbox]+label, .xuan-group input[type=radio]+label {
            line-height: 1;
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            /*cursor: pointer;*/
            -webkit-box-align: center;
            -webkit-align-items: center;
            -ms-flex-align: center;
            align-items: center;
            margin:2px;
        }
        .xuan-group input[type=checkbox]+label:before, .xuan-group input[type=radio]+label:before {
            line-height: 20px;
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 8px;
            content: '';
            color: #fff;
            border: 1px solid #dce4e6;
            background-color: #f3f6f8;
            border-radius: 3px;
        }
        .xuan-group input[type=checkbox]:checked+label:before,.xuan-group input[type=radio]:checked+label:before{
            content:' ';
            background:#e02222 url(images/input_checked_1.png) 2px 1px no-repeat;
            background-size:80% 80%;
        }
    </style>
</head>
<body>
    <div style="border:5px solid red;">
        <p style="font-size:20px">纯CSS写法:</p>
        <p>第一组单选</p>
        <div class="checkbox-group">
            <input type="radio" id="one" name="dan"/>
            <label for="one">记住密码</label>
        </div>
        <div class="checkbox-group">
            <input type="radio" id="two" name="dan"/>
            <label for="two">记住密码</label>
        </div>
        <div class="checkbox-group">
            <input type="radio" id="three" name="dan"/>
            <label for="three">记住密码</label>
        </div>
        <p>第二组单选</p>
        <div class="checkbox-group">
            <input type="radio" id="one2" name="dan2"/>
            <label for="one2">记住密码</label>
        </div>
        <div class="checkbox-group">
            <input type="radio" id="two2" name="dan2"/>
            <label for="two2">记住密码</label>
        </div>
        <div class="checkbox-group">
            <input type="radio" id="three2" name="dan2"/>
            <label for="three2">记住密码</label>
        </div>
        <p>第一组复选</p>
        <div class="checkbox-group">
            <input type="checkbox" id="one3" name="fu"/>
            <label for="one3">记住密码</label>
        </div>
        <div class="checkbox-group">
            <input type="checkbox" id="two3" name="fu"/>
            <label for="two3">记住密码</label>
        </div>
        <div class="checkbox-group">
            <input type="checkbox" id="three3" name="fu"/>
            <label for="three3">记住密码</label>
        </div>
        <p>第二组复选</p>
        <div class="checkbox-group">
            <input type="checkbox" id="one4" name="fu2"/>
            <label for="one4">记住密码</label>
        </div>
        <div class="checkbox-group">
            <input type="checkbox" id="two4" name="fu2"/>
            <label for="two4">记住密码</label>
        </div>
        <div class="checkbox-group">
            <input type="checkbox" id="three4" name="fu2"/>
            <label for="three4">记住密码</label>
        </div>
    </div>

    <div style="border:5px solid blue;">
        <p style="font-size:20px">使用背景图片写法:</p>
        <p>第一组单选</p>
        <div class="xuan-group">
            <input type="radio" id="radioOne" name="picRadio"/>
            <label for="radioOne">勾选</label>
        </div>
        <div class="xuan-group">
            <input type="radio" id="radioTwo" name="picRadio"/>
            <label for="radioTwo">勾选</label>
        </div>
        <div class="xuan-group">
            <input type="radio" id="radioThree" name="picRadio"/>
            <label for="radioThree">勾选</label>
        </div>
        <p>第一组复选</p>
        <div class="xuan-group">
            <input type="checkbox" id="radioOne2" name="picBox"/>
            <label for="radioOne2">勾选</label>
        </div>
        <div class="xuan-group">
            <input type="checkbox" id="radioTwo2" name="picBox"/>
            <label for="radioTwo2">勾选</label>
        </div>
        <div class="xuan-group">
            <input type="checkbox" id="radioThree2" name="picBox"/>
            <label for="radioThree2">勾选</label>
        </div>
    </div>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值