修改type="radio"默认选中背景色样式以及取值
2021-07-09 本文已影响0人
Amanda妍
css部分:
input[type="radio"] + label::before {
content: " ";
display: inline-block;
vertical-align: middle;
width: .853333rem;
height: .853333rem;
border-radius: 50%;
border: .064rem solid #d8d8d8;
margin-right: .213333rem;
box-sizing: border-box;
}
input[type="radio"]:checked + label::before {
background-color: #51c066;
background-clip: content-box;
padding: .149333rem;
box-sizing: border-box;
}
input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}
html部分:
<div class="rdo">
<input name="sex" id="male" type="radio" value="男" checked="checked">
<label for="male">男</label>
</div>
<div class="rdo">
<input name="sex" id="female" type="radio" value="女">
<label for="female">女</label>
</div>
<button type="button">提交</button>
js取选中radio值:
$(function(){
$('button').click(()=>{
var val = $('input[name="sex"]:checked').val();
console.log(val)
})
});
