借助checkbox实现自定义radio
程序员文章站
2022-06-08 18:07:12
...
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>
没选择前效果图：
选择后效果图：
上一篇： 锡纸烧烤怎么做，一起来看看
下一篇： NFinal 视图—用户控件