关于radio样式的设置

2019-03-22  本文已影响0人  筱筱2019

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

上一篇下一篇

猜你喜欢

热点阅读