Fork me on GitHub

自定义单选框，复选框样式 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        input{width: 0;height: 0;position: absolute;left: -9999em}
        *{margin: 0;padding: 0}
        label{position: relative;height: 25px;display: block;}
        input[type="radio"] + label::before {
            content: "\a0"; /*不换行空格*/
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 5px;
            border-radius: 50%;
            border: 1px solid #01cd78;
            text-indent: 5px;
        }
        input[type="radio"] + label::after {
            content: "\a0"; /*不换行空格*/
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-right: 5px;
            border-radius: 50%;
            background: #01cd78;
            position: absolute;
            left: 5px;
            top: 5px;
            opacity: 0;

        }

        input[type="radio"]:checked + label::after {
            opacity:1;
        }


        input[type="checkbox"] + label::before {
            content: "\a0"; /*不换行空格*/
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 5px;
            border: 1px solid #01cd78;
            text-indent: 5px;
        }
        input[type="checkbox"] + label::after {
            content: "\a0"; /*不换行空格*/
            display: inline-block;
            width: 10px;
            height: 10px;
            margin-right: 5px;
            background: #01cd78;
            position: absolute;
            left: 5px;
            top: 5px;
            opacity: 0;

        }

        input[type="checkbox"]:checked + label::after {
            opacity:1;
        }
        i{font-style: normal}


    </style>
</head>
<body>
<div class="female">
    <input type="radio" id="female" name="sex" checked/>
    <label for="female"><i>女</i></label>
</div>
<div class="male">
    <input type="radio" id="male" name="sex" />
    <label for="male"><i>男</i></label>
</div>


<div class="female">
    <input type="checkbox" id="female2" name="sex" checked/>
    <label for="female2"><i>鱼</i></label>
</div>
<div class="male">
    <input type="checkbox" id="male2" name="sex" />
    <label for="male2"><i>熊掌</i></label>
</div>

</body>
</html>

 

posted @ 2017-12-06 14:56  小白不白10  阅读(1085)  评论(0)  编辑  收藏  举报