css实现男女性别选择单选框自定义选中与否背景色样式

huakaiwuxing

于 2019-04-01 10:10:25 发布

阅读量4.7k

点赞数

本文链接：https://blog.csdn.net/huakaiwuxing/article/details/88942388

版权

input[type=radio] {
    margin-right: 5px;
    cursor: pointer;
    font-size: 14px;
    width: 15px;
    height: 12px;
    position: relative;
    top: 15px;
    left: 15px;
}

input[type=radio]:after {
    position: absolute;
    width: 15px;
    height: 15px;
    top: 0;
    content: " ";
    background-color: #fff;
    color: #fff;
    display: inline-block;
    visibility: visible;
    padding: 0px 3px;
    border-radius: 50%;
    border: 1px solid #ebebeb;
}

input[type=radio]:checked:before {
    content: " ";
    display: block;
    position: relative;
    top: 0;
    width: 15px;
    height: 15px;
    color: #fff;
    font-weight: 400;
    z-index: 1;
    border-radius: 50%;
    background-color: #40c8c4;
}

<div class="man left">男</div>
<input class="left" id="gender1" type="radio" name="gender" checked>
<div class="women left">女</div>
<input class="left" id="gender2" type="radio" name="gender">