CSS3美化单选按钮

CSS3美化单选按钮

HTML结构
先引入字体图标<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="radio-wrapper">
        <div class="gender">
            <label for="male"><input type="radio" name="gender" id="male" value="male" checked><i class="fa fa-mars"></i></label>
            <label for="female"><input type="radio" name="gender" id="female" value="female"><i class="fa fa-venus"></i></label>
            <label for="secret"><input type="radio" name="gender" id="secret" value="secret"><i class="fa fa-mercury"></i></label>
        </div>
    </div>

CSS样式

*{margin: 0; padding: 0;}
        .radio-wrapper {width: 180px; height: 60px; margin: 200px auto;}
        
        .gender{
            width: 180px;
            height: 60px;
        }

        .gender label {
            position: relative;
            float: left;
            width: 60px;
            height: 60px;
        }

        .gender i.fa {
            position: absolute;
            top: 10px;
            left: 10px;
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            border-radius: 50%;
            background-color: #acafac;
            font-size: 22px;
            color: #fff;
            cursor: pointer;

            transition: all .2s ease-in;
        }

        .gender input[type="radio"] {
            display: none;
        }

        .gender input[type="radio"]:checked + i {
            background-color: #47c147;
            box-shadow: 0 0 3px 1px #47c147;
        }