美文网首页
关于radio样式的设置

关于radio样式的设置

作者: 筱筱2019 | 来源:发表于2019-03-22 23:41 被阅读0次

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

        <title>Document</title>

    </head>

    <style>

      input[type="radio"] {

        width: 20px;

        height: 20px;

        opacity: 0;

    }

    input[type="radio"] + label::before {

        display: inline-block;

        width: 16px;

        height: 16px;

        border-radius: 50%;

        margin-right: 10px;

        vertical-align: text-bottom;

        border: 1px solid #d9d9d9;

        -webkit-box-sizing: border-box;

        box-sizing: border-box;

        content: "";

    }

    input[type="radio"]:checked +  label::before {

        background-color: white;

        background-clip: content-box;

        border-color: #79a0ff;

        border-width: 5px;

    }

    </style>

    <body>

        <div>

            <input class="doRadio doRadioFirst" id="carMatch" type="radio" name="attributes" value="汽配">

            <label for="carMatch">汽配</label>

            <input class="doRadio" type="radio" id="carRepair" name="attributes" value="汽修">

            <label for="carRepair">汽修</label>

            <input class="doRadio" type="radio" id="other" name="attributes" value="其他">

            <label for="other">其他</label>

        </div>

    </body>

    </html>

    相关文章

      网友评论

          本文标题:关于radio样式的设置

          本文链接:https://www.haomeiwen.com/subject/hgzdvqtx.html