怎样更改Radio单选框的图标大小


怎样更改这个图标的大小

解决方案 »

  1.   

    用一些现有的UI组件, jQuery UI, bootstrap等.
      

  2.   

    用图片+js来模拟，系统的radio无法更改大小
      

  3.   


    <!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: 15px;
    height: 15px;
    vertical-align: middle;
    border-radius: 50%;
    border: 6px solid #999;
    background-color: #ddd;
    }
    input[type="radio"]:checked+span {
    border: 6px solid #00f;
    background-color: #f00;
    }
    </style>
    </head>
    <body>
    <label><input type="radio" name="test" checked="checked" /><span></span>1111</label>
    <label><input type="radio" name="test" /><span></span>2222</label>
    <label><input type="radio" name="test" /><span></span>3333</label>
    </body>
    </html>
      

  4.   

    如果只是更改大小, 把font-size的值设大一些