自定义单选按钮 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
            label{
                position: relative;
                float: left;
                width: 100px;
                height: 100px;
                border: 2px solid;
                overflow: hidden;
                /*变成圆形*/
                border-radius: 50%;
            }
            label > span{
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                right: 0;
            }
            input{
                position: absolute;
                top: -50px;
                left: -50px;
            }
            input:checked +span{
                background-color: palevioletred;
            }
            
        </style>
    </head>
    <body>
        <label >
            <input type="radio" name="button" />
            <span></span>
        </label>
         <label >
            <input type="radio" name="button" />
            <span></span>
        </label>
         <label >
            <input type="radio" name="button" />
            <span></span>
        </label>
        
    </body>
</html>

 

posted @ 2019-11-18 16:09  大轩  阅读(143)  评论(0)    收藏  举报