修改radio的选中颜色为红色

最新推荐文章于 2024-05-31 08:52:28 发布

我是李大福

最新推荐文章于 2024-05-31 08:52:28 发布

阅读量9.2k

点赞数 1

分类专栏： html页面样式 css/less/scss 文章标签： html

原文链接：http://www.c.c

版权

样式 css/less/scss 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

html页面

31 篇文章 0 订阅

订阅专栏

修改radio选中颜色为蓝色

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>修改radio的选中颜色为红色</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
    <script crossorigin="anonymous" integrity="sha384-6ePHh72Rl3hKio4HiJ841psfsRJveeS+aLoaEf3BWfS+gTF0XdAqku2ka8VddikM" src="https://lib.baomitu.com/jquery/1.11.3/jquery.min.js"></script>
    <style type="text/css">
        .choose {
            position: relative;
        }

        .choose .radio {
            position: relative;
            display: inline-block;
            font-weight: 400;
            color: #0c4757;
            padding-left: 25px;
            cursor: pointer;
        }

        .choose .radio input {
            position: absolute;
            left: -9999px;
        }

        .choose .radio i {
            display: block;
            position: absolute;
            top: 3px;
            left: 0;
            width: 15px;
            height: 15px;
            outline: 0;
            border: 1px solid #e4e4e4;
            background: #ffffff;
            border-radius: 50%;
            transition: border-color .3s;
            -webkit-transition: border-color .3s;
        }
         .choose .radio input[checked="checked"]+i {
            border-color: blue;
        }

        .choose .radio input+i:after {
            position: absolute;
            content: '';
            top: 3px;
            left: 3px;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background-color: blue;
            opacity: 0;
            transition: opacity .1s;
            -webkit-transition: opacity .1s;
        }

        .choose .radio input:checked+i:after {
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="choose">
        <label class="radio">选项1<input type="radio" name="radio" value="1" checked="checked"><i></i></label>
        <label class="radio">选项2<input type="radio" value="2" name="radio"><i></i></label>
    </div>
    <script type="text/javascript">
        $(function () {
            $(".radio").find('input').click(function () {
                $(this).parent('label').siblings('label').find('input').removeAttr('checked') && $(this).attr('checked', 'checked');
            })
        })
    </script>
</body>

</html>

我是李大福

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
8
评论
修改radio的选中颜色为红色

修改radio选中颜色为红色<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>修改radio的选中颜色为红色</title> <meta name="description" content=
复制链接

扫一扫

专栏目录