一款单选框radio样式

最新推荐文章于 2024-01-16 13:37:50 发布

vuturn

最新推荐文章于 2024-01-16 13:37:50 发布

阅读量4k

点赞数 2

分类专栏： CSS 文章标签：单选框样式 radio样式

本文链接：https://blog.csdn.net/vuturn/article/details/50245659

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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>

样式效果如下：

vuturn

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一款单选框radio样式

.radio-btn { width: 20px; height: 20px; display: inline-block; float: left; margin: 3px 7px 0 0; cursor: pointer; po
复制链接

扫一扫