css案例15——复选框样式修改（复选框变为圆角）_多选框改为圆角html不生效

作者：不正经 | 2024-03-23 02:38:35

踩

多选框改为圆角html不生效

一、案例简介

默认的复选框是方形的，有时候项目需求要改为圆形，这时候就很头疼啊，因为自己用css直接改，效果没有任何变化。如下：
而且不光是这个问题，为了更人性化，最好是点击文字“苹果”时也能选中或不选中。那这个问题是用label标签处理的。
所以一共涉及两个问题：
点击文字或按钮都会选中，也可以取消。
改变复选框的样式问题。

文章的后面会附上完整代码。

二、案例演示以及讲解过程

在这里插入图片描述

1.label标签的使用：https://www.runoob.com/tags/att-label-for.html

<input type="checkbox" name="sex" id="man" value="man" />
<label for="man">男</label>
1
2

或者

<label for="man">
	<input type="checkbox" name="sex" id="man" value="man" />男
</label>
1
2
3

关键点在于 label 里面的for属性的属性值一定要和复选框控件里面id的属性值保持一致。

2.`+` 相邻兄弟选择器

网址：https://www.runoob.com/cssref/sel-element-pluss.html

3.`:after`选择器

网址：https://www.runoob.com/cssref/sel-element-pluss.html

三、案例代码

1.多选代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/*按钮样式*/
			.box {
				position: relative;
				line-height: 30px;
			}

			/* 把默认的样式隐藏掉，我们之后自己写 */
			input {
				display: none;
			}

			/* 未选中的样式 */
			input[type=checkbox]+span {
				/* 首先将内联元素转化一下，因为内联元素是无法设置宽高的。 */
				display: inline-block;
				/* 设置成正圆 */
				border-radius: 50%;
				width: 20px;
				height: 20px;
				border: 1px solid #999;
				/* 设置位置 */
				position: absolute;
				top: 5px;
				left: 0;
			}

			/* 选中之后的样式，这里的样式主要是操作的里面的小绿点*/
			input[type=checkbox]:checked+span::after {
				/* 使用结构伪类after,必须要写conten属性
				这里面可以换成其他的样式：√、×等等均可 */
				content: '●';
				/* 对中间小点设置位置，确保在正中间*/
				position: absolute;
				top: -8px;
				left: 0;
				/* 设置选中圆的颜色 */
				color: #41A863;
				font-size: 30px;
			}

			/* 文本距离左边圆形按钮的距离 */
			.txt {
				margin-left: 30px;
			}
		</style>
	</head>
	<body>
		<form action="#">
			<h3>（多选题）请选择你喜欢的书籍：</h3>
			<!--多选框start-->
			<div class="box">
				<label for="book1">
					<input type="checkbox" name="book" id="book1" />
					<span></span>
					<span class="txt">《沉默的大多数》——王小波</span>
				</label>
			</div>
			<!--多选框end-->
			<!-- 以下复制多个 -->
			<div class="box">
				<label for="book2">
					<input type="checkbox" name="book" id="book2" />
					<span></span>
					<span class="txt">《法治的细节》——罗翔</span>
				</label>
			</div>
			<div class="box">
				<label for="book3">
					<input type="checkbox" name="book" id="book3" />
					<span></span>
					<span class="txt">《盗墓笔记》——南派三叔</span>
				</label>
			</div>
		</form>
	</body>
</html>
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

在这里插入图片描述

2、单选代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			/*按钮样式*/
			.box {
				position: relative;
				line-height: 30px;
			}

			/* 把默认的样式隐藏掉，我们之后自己写 */
			input {
				display: none;
			}

			/* 未选中的样式 */
			input[type=radio]+span {
				/* 首先将内联元素转化一下，因为内联元素是无法设置宽高的。 */
				display: inline-block;
				/* 设置成正圆 */
				border-radius: 50%;
				width: 20px;
				height: 20px;
				border: 1px solid #999;
				/* 设置位置 */
				position: absolute;
				top: 5px;
				left: 0;
			}

			/* 选中之后的样式，这里的样式主要是操作的里面的小绿点*/
			input[type=radio]:checked+span::after {
				/* 使用结构伪类after,必须要写conten属性
				这里面可以换成其他的样式：√、×等等均可 */
				content: '●';
				/* 对中间小点设置位置，确保在正中间*/
				position: absolute;
				top: -8px;
				left: 0;
				/* 设置选中圆的颜色 */
				color: #41A863;
				font-size: 30px;
			}

			/* 文本距离左边圆形按钮的距离 */
			.txt {
				margin-left: 30px;
			}
		</style>
	</head>
	<body>
		<form action="#">
			<h3>（单选题）请选择你最喜欢的书籍：</h3>
			<!--单选框start-->
			<div class="box">
				<label for="book1">
					<input type="radio" name="book" id="book1" />
					<span></span>
					<span class="txt">《沉默的大多数》——王小波</span>
				</label>
			</div>
			<!--单选框end-->
			<!-- 以下复制多个 -->
			<div class="box">
				<label for="book2">
					<input type="radio" name="book" id="book2" />
					<span></span>
					<span class="txt">《法治的细节》——罗翔</span>
				</label>
			</div>
			<div class="box">
				<label for="book3">
					<input type="radio" name="book" id="book3" />
					<span></span>
					<span class="txt">《盗墓笔记》——南派三叔</span>
				</label>
			</div>
		</form>
	</body>
</html>

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

请添加图片描述

四、总结

需要融会贯通、整体代码不是很多，写完一个，其余复制出来即可。位置、样式均可变成其他样式，看自己的需求。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/292572