美文网首页
修改type="radio"默认选中背景色样式以及取值

修改type="radio"默认选中背景色样式以及取值

作者: Amanda妍 | 来源:发表于2021-07-09 16:33 被阅读0次

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)
                })
            });
image.png

相关文章

网友评论

      本文标题:修改type="radio"默认选中背景色样式以及取值

      本文链接:https://www.haomeiwen.com/subject/mhbfpltx.html