当前位置:首页 > 前端技术 > 修改radio的选中颜色为红色

修改radio的选中颜色为红色

2022年09月16日 13:52:41前端技术6

修改radio选中颜色为蓝色

修改radio的选中颜色为红色 _ JavaClub全栈架构师技术笔记

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

作者:我是李大福
来源链接:https://blog.csdn.net/weixin_42708208/article/details/110064015

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42031.html

标签: 颜色设置
分享给朋友:

“修改radio的选中颜色为红色” 的相关文章

idea中字体大小以及注释的颜色设置

idea中字体大小以及注释的颜色设置

idea中字体大小以及注解的颜色设置的使用 字体设置 注解颜色 作者:徐小冠 来源链接:https://blog.csdn.net/weixin_42114097/article/details/81380346...

ECharts热力图指定颜色

ECharts热力图指定颜色

ECharts是便捷使用的图标框架,绘制热力图和方便 关键数值 x轴 y轴 数据:(x, y, value) 渐变色 移动效果要将前一次的数据清空 热力图官方链接 https://echarts.apache.org/...

ZH奶酪:通过CSS自定义HTML中hr样式-颜色-形状

ZH奶酪:通过CSS自定义HTML中hr样式-颜色-形状

修改颜色,线条形状,粗细等... CSS代码: .zh_hr{ border:3px solid rgba(255, 255, 255, 0.50); margin-bottom: 2px; margin-top: 2px }...

html颜色代码大全,二进制颜色代码大全,markdown 字体颜色设置

html颜色代码大全,二进制颜色代码大全,markdown 字体颜色设置

FFFFFF #DDDDDD #AAAAAA #888888 #666666 #444444 #000000...

HTML基础之颜色

颜色表示 HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。 每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。 目前所有浏览器也都支持颜色名来定义。包括141个颜色名称都是在HTML...

secureCRT设置背景颜色和目录(文件夹)颜色

secureCRT设置背景颜色和目录(文件夹)颜色

设置背景颜色: 步骤一:Options--->Global Options...如下图所示: 步骤二:Terminal--->Appearance--->ANSI Color,点击右边的Normal colors的第一个配色框【...

html设置水平线颜色

html设置水平线颜色

<!DOCTYPE <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>设置水平线颜色</title> </he...

HTML颜色的三种写法

颜色的三种写法: 1.16进制代码     #000000 2.英文字母         red 3.rgba        &nbs...

Elementui中表格的表头设置背景颜色

表格的header-cell-style属性是表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 <el-table :data='list' border :header-ce...

颜色直方图

转自:http://baike.baidu.com/view/2438797.htm 颜色直方图是在许多图像检索系统中被广泛采用的颜色特征。它所描述的是不同色彩在整幅图像中所占的比例,而并不关心每种色彩所处的空间位置,即无法描述图像中的对象或物体。颜色直方图特别适于描述...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。