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

Posted 小白不白

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义单选框，复选框样式相关的知识，希望对你有一定的参考价值。

<!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>

 

以上是关于自定义单选框，复选框样式的主要内容，如果未能解决你的问题，请参考以下文章

使用纯css3自定义单选框radio和复选框checkbox

自定义_单选按钮和复选框_样式

input单选框美化——自定义样式

不用系统自带的复选框，单选按钮，选择框的样式，该怎么做

AlertDialog.Builder+SpannableStringBuilder自定义单选框

自定义单选框和复选框案例