使用原生js,css实现radio组件

解决方案 »

  1.   


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
    <style type="text/css">
    input[type="radio"] {
    display: none;
    }
    input[type="radio"]+span {
    display: inline-block;
    width: 25px;
    height: 25px;
    vertical-align: middle;
    border-radius: 50%;
    border: 1px solid #999;
    background-color: #fff;
    }
    input[type="radio"]:checked+span {
    width: 15px;
    height: 15px;
    border: 6px solid #39f;
    background-color: #fff;
    }
    </style>
    </head>
    <body>
    <label><input type="radio" name="test" /><span></span>选项A</label><br />
    <label><input type="radio" name="test" /><span></span>选项B</label><br />
    <label><input type="radio" name="test" checked="checked" /><span></span>选项C</label><br />
    </body>
    </html>