input单选样式修改

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuxinxiang/article/details/80349135

html结构

<input class="m_input" type="radio" id="male" checked="checked" name="sex"><label for="male"></label>
<input class="m_input" type="radio" id="female" name="sex"><label for="female"></label>
<input class="m_input" type="radio" id="Unspecified" name="sex"><label for="Unspecified">未指定</label>

css代码

input[type="radio"] + label::before {
    content: "\a0"; /*不换行空格*/
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 1px solid #d5d5d5;
    box-sizing: border-box;
    background-color: #f3f3f3;
    margin-right: 7px;
    position: relative;
    top: 11px;
}
input[type="radio"]:checked + label::before {
    background-color: #65748e;
    background-clip: content-box;
    padding: 2px;
}
input[type="radio"] {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}

效果图


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页