将html的radio单选框自定义样式为正方形和对号的教程
xml/xslt
来源：互联网
作者：佚名
发布时间：2023-12-15 22:05:29
人浏览
摘要
将html的radio单选框自定义样式为正方形和对号 背景： 如何能把html的input type=radio name=option改成自定义的样式呢？比如想要把他变成正方形，选中的时候是对号。默认的样式太丑了 默认
将html的radio单选框自定义样式为正方形和对号
背景：
如何能把html的<input type="radio" name="option">改成自定义的样式呢？比如想要把他变成正方形，选中的时候是对号。默认的样式太丑了
默认样式：
自定义样式：
实现代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
|
<!DOCTYPE html>
<html>
<head>
<style>
input[type="radio"] {
display: none;
}
.square-radio {
display: flex;
position: relative;
width: 20px;
height: 20px;
border: 2px solid #333;
cursor: pointer;
}
.square-radio::after {
content: "?";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 14px;
color: #333;
display: none;
}
input[type="radio"]:checked + .square-radio::after {
color: #2196F3;
display: block;
}
</style>
</head>
<body>
<div class="box">
性别：
<label>
男
<input type="radio" name="option">
<span class="square-radio"></span>
</label>
<label>
女
<input type="radio" name="option">
<span class="square-radio"></span>
</label>
</div>
</body>
</html>
|
|
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。
