一款单选框radio样式

最新推荐文章于 2021-06-11 13:08:16 发布

原创最新推荐文章于 2021-06-11 13:08:16 发布 · 4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#单选框样式 #radio样式

CSS 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现动态样式切换的技术，通过点击不同按钮改变页面元素的样式，展示了交互式网页设计的基本原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .radio-btn {
            width: 20px;
            height: 20px;
            display: inline-block;
            float: left;
            margin: 3px 7px 0 0;
            cursor: pointer;
            position: relative;

            border-radius: 100%;
            border: 1px solid #ccc;
            box-shadow: 0 0 1px #ccc;
            background: rgb(255, 255, 255);
            background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1)));
            background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
            background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
            background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
            background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
        }
        .radio-btn i {
            border: 1px solid #E1E2E4;
            width: 10px;
            height: 10px;
            position: absolute;
            left: 4px;
            top: 4px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
        }
        input{display: none;}
        .checkedRadio {
            box-shadow: inset 0 0 5px 1px #ccc;
        }
        .checkedRadio i {
            background-color: #898A8C;
        }
    </style>
</head>
<body>
<div class="radio-btn" data-level="S">
    <i data-level="S">

    </i>
</div>
<div class="radio-btn" data-level="A">
    <i data-level="A">

    </i>
</div>
<div class="radio-btn" data-level="B">
    <i data-level="B">
    </i>
</div>
<input type="radio" name="radio-btn" value="S">
<input type="radio" name="radio-btn" value="A">
<input type="radio" name="radio-btn" value="B">
<script src="jquery-2.1.4.js"></script>
<script type="text/javascript">

    $(document).on("click",".radio-btn", function (e) {

        var _this = $(this),
                block = _this.parent().parent();
        block.find(".radio-btn").removeClass('checkedRadio');
        _this.addClass('checkedRadio');
        $("input").each(function(){
            if( this.value == _this.data("level")){
                $(this).trigger("click");
                return false;
            }
        });

    });

</script>
</body>

</html>

样式效果如下：