自定义选择性别

最新推荐文章于 2023-07-06 14:44:38 发布

豆奶dudu

最新推荐文章于 2023-07-06 14:44:38 发布

阅读量1.6k

点赞数

分类专栏： web 文章标签： v

本文链接：https://blog.csdn.net/qq_36457584/article/details/82115382

版权

web 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

html:

<div class="label">
    <label for="man" class="radio_label checked">
        <input type="radio" name="sex" id="man" value="1" checked="checked">男
    </label>
    <label for="woman" class="radio_label">
        <input type="radio" name="sex" id="woman" value="2" >女
    </label>
</div>

css:

.label{
    position: absolute;
    width: 386px;
    height: 25px;
    float: left;
    display: inline-block;
    top: 25%;
    left: 143px;
    font-size: 27px;
    line-height: 27px;
}
.radio_label{
    background-repeat: no-repeat;
    -webkit-background-size: 25px 50px;
    background-size: 25px 50px;
    display: inline-block;
    line-height: 25px;
    text-indent:30px;
    margin-right:10px;

}
.radio_label.checked {
    background-position: 0 -25px;
}

.radio_label input[type='radio'] {
    display:none;
}
input::-webkit-input-placeholder{
    color: #917449;
}
input::-webkit-input-placeholder{
    color: #917449;
}
input::-moz-placeholder{
    color: #917449;
}

js:

//选择性别
$("input[type='radio']").click(function(){
    $("input[type='radio'][name='"+$(this).attr('name')+"']").parent().removeClass("checked")
    $(this).parent().addClass("checked");
});