修改radio默认样式

  •  作者:root
  •  发布于:2019-09-10 11:17:35
  •  栏目:WEB前端
  •  来源:本站
  •  共50人围观
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>checkbox style</title>
    <style>
        /* RADIO */
        /*把原来的复选框隐藏*/
        .input_radio input {position: absolute; clip: rect(0, 0, 0, 0);}
        .input_radio input[type="radio"] + label::before {
            content: "\a0";  
            width: 20px;
            height: 20px;
            text-indent: .15em;
            line-height: 20px;  
            display: inline-block;
            border-radius: 50px;
            background-color: #fff;
            border: 1px solid #C1CACA;
        }
        .input_radio input[type="radio"]:checked + label::before {
            content: "\2714";
            color: #243441;
            width: 20px;
            height: 20px;
            background-color: #ECF2F7;
            border: 1px solid #92A1AC;
            box-shadow:0px 0px 5px 0px #47d9bf;
        }


    </style>
</head>
<body>
    <div>
        <input type="radio" id="label_input5" name="radio" checked />
        <label for="label_input5">php</label>
        <input type="radio" id="label_input6" name="radio" />
        <label for="label_input6">html</label>
        <input type="radio" id="label_input7" name="radio" />
        <label for="label_input7">sql</label>
        <input type="radio" id="label_input8" name="radio" />
        <label for="label_input8">javascript</label>
    </div>
</body>
</html>

效果图

radio效果图


转载请说明出处: 我的博客园» 欢迎来到博客

评论