• css案例15——复选框样式修改（复选框变为圆角）

    一、案例简介

    1. 默认的复选框是方形的，有时候项目需求要改为圆形，这时候就很头疼啊，因为自己用css直接改，效果没有任何变化。如下：
      请添加图片描述

    2. 而且不光是这个问题，为了更人性化，最好是点击文字“苹果”时也能选中或不选中。那这个问题是用label标签处理的。
      在这里插入图片描述

    3. 所以一共涉及两个问题：
      点击文字或按钮都会选中，也可以取消。
      改变复选框的样式问题。

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

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

    在这里插入图片描述

    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

    请添加图片描述

    四、总结

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

  • 相关阅读:
    金仓数据库WalMiner日志逻辑解码工具 （5. WalMiner使用示例）
    《canvas》之第1章 canvas概述
    CommonsCollection6反序列化链学习
    nginx实现vue和后端的双机负载
    mysql 之进阶查询语句
    【Arduino+ESP32专题】案例：使用INA3221监控电压电流 1
    ATTransUNet：一种增强型混合Transformer结构用于超声图像分割
    皕杰报表之语义层
    MySQL-InnoDB索引详解
    服务网格概述
  • 原文地址：https://blog.csdn.net/xulihua_75/article/details/125436603