借助checkbox实现自定义radio

最新推荐文章于 2021-05-26 16:31:57 发布

风风草

最新推荐文章于 2021-05-26 16:31:57 发布

阅读量154

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/u011523953/article/details/104583721

版权

前端专栏收录该内容

49 篇文章 2 订阅

订阅专栏

1、需要用到相邻兄弟选择器、伪元素选择器、伪类选择器

2、需要借助label标签的特性：用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

代码详细：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .checkbox1{
            display: none;
        }
        .checkbox1 + i{
            display:inline-block;
            font-style: normal;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #c0c0c0;
        }
        .checkbox1:checked +i{
            background-color: hotpink;
        }
        .checkbox1:checked + i::after{
            content:' ';
            display:inline-block;  
            margin: 5px;    
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;     
        }
    </style>
</head>
<body>
    <label>
        <input type="checkbox" class="checkbox1" >
        <i></i>
    </label>    
</body>
</html>

没选择前效果图：

在这里插入图片描述

选择后效果图：

在这里插入图片描述

风风草

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
借助checkbox实现自定义radio

1、需要用到相邻兄弟选择器、伪元素选择器、伪类选择器2、需要借助label标签的特性：用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。代码详细：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Docume...
复制链接

扫一扫

专栏目录