改变单选框radio的样式

最新推荐文章于 2022-07-15 14:47:41 发布

mh的63

最新推荐文章于 2022-07-15 14:47:41 发布

阅读量1.8k

点赞数 1

分类专栏： css 文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/baidu_39048029/article/details/99012283

版权

css 专栏收录该内容

4 篇文章

订阅专栏

改变单选框radio的样式

先附上效果图：
在这里插入图片描述
具体实现步骤：

在input标签后面添加一个span标签用来改变样式

<label for="radio1">
                            <input type="radio" class="radio-type" id="radio1" name="radio">
                            <span class="radioInput"></span>
                            <img src="./img/lc-null.jpg" alt="addHouse" class="img-rounded">
                            <div class="con">创建新房源</div>
                        </label>

将Input的display设置为none,然后写span的样式作为radio的未选中样式

#panel #radio1,#panel #radio2,#panel #radio3{
    display: none;
}
#panel .radioInput {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #EFEFEF;
    border-radius: 100%;
    margin-right: 10px;
    vertical-align: middle;
}

使用after伪类，写radio选中时的样式

#panel .radio-type:checked + .radioInput:after{
    content:"";
    display: inline-block;
    width:9px;
    height:9px;
    background:#008489;
    border-radius:100%;
    margin-bottom:3px;
    margin-left:2.5px;
}
#panel .radio-type:checked + .radioInput {
    border: 2px solid #008489;
    box-shadow: 0 0 5px #008489;
}

最后附上全部代码：
html部分：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>管理面板</title>
        <link rel="stylesheet" href="../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="../css/panel.css">
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div id="panel" class="container">
            <div class="row">
                <div class="col-lg-12">
                    <p class="panel-title">您想先做什么？</p>
                    <div>
                        <label for="radio1">
                            <input type="radio" class="radio-type" id="radio1" name="radio">
                            <span class="radioInput"></span>
                            <img src="./img/lc-null.jpg" alt="addHouse" class="img-rounded">
                            <div class="con">创建新房源</div>
                        </label>
                    </div>
                    <p class="panel-title1">完成发布房源</p>
                    <div>
                        <label for="radio2">
                            <input type="radio" class="radio-type" id="radio2" name="radio">
                            <span class="radioInput"></span>
                            <img src="./img/lc-img1.jpg" alt="miaoshu" class="img-rounded">
                            <div class="con">
                                <div>Jungle• 8 靠近太古里的纯日式住宅</div>
                                <div>整套房子</div>
                            </div>
                        </label>
                    </div>
                    <div>
                        <label for="radio3">
                            <input type="radio" class="radio-type" id="radio3" name="radio">
                            <span class="radioInput"></span>
                            <img src="./img/lc-img1.jpg" alt="miaoshu" class="img-rounded">
                            <div class="con">
                                <div>Jungle• 8 靠近太古里的纯日式住宅</div>
                                <div>整套房子</div>
                            </div>
                        </label>
                    </div>
                    <button class="btn btn-default pull-right" type="submit">下一步</button>
                </div>
            </div>
        </div>

        <script src="../lib/jquery.js"></script>
        <script>
            let state=1;
            $("label").on("click",function () {
                console.log($(this).children("input").attr("id"))
                if($(this).children("input").attr("id")!=="radio1"){
                    state=0;
                }else{
                    state=1;
                }
            })
            $("button").on("click",function () {
                if(state===0){
                    location.href="editHouse";
                }else{
                    location.href="addHouse";
                }

            })
        </script>
    </body>
</html>

css部分：

.panel-title{
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 30px;
    color: #484848;
}
#panel{
    margin-top: 60px;
}

#panel #radio1,#panel #radio2,#panel #radio3{
    display: none;
}
#panel .radioInput {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid #EFEFEF;
    border-radius: 100%;
    margin-right: 10px;
    vertical-align: middle;
}
#panel .radio-type:checked + .radioInput:after{
    content:"";
    display: inline-block;
    width:9px;
    height:9px;
    background:#008489;
    border-radius:100%;
    margin-bottom:3px;
    margin-left:2.5px;
}
#panel .radio-type:checked + .radioInput {
    border: 2px solid #008489;
    box-shadow: 0 0 5px #008489;
}
#panel img{
    width: 96px;
}
#panel .con{
    display: inline-block;
    margin-left: 15px;
    font-size: 16px;
    font-weight: 500;
    vertical-align: middle;
}
#panel .panel-title1{
    font-size: 18px;
    font-weight: 600;
    color: #484848;
    margin-bottom: 20px;
}
#panel .panel-title~div,#panel .panel-title1~div{
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
#panel button{
    background-color: #008489;
    color: white;
    font-weight: 600;
    width: 90px;
    height: 40px;
}