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

最新推荐文章于 2024-08-21 12:07:29 发布

耶啵奶膘

最新推荐文章于 2024-08-21 12:07:29 发布

阅读量7.4k

点赞数 8

分类专栏： CSS 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/xulihua_75/article/details/125436603

版权

CSS 专栏收录该内容

38 篇文章 2 订阅

订阅专栏

本文通过HTML和CSS详细介绍了如何改变复选框和单选框的默认样式，将其转化为圆形，并实现点击文字即可选中或取消选中的功能。利用label的for属性和CSS的相邻兄弟选择器、伪类`:after`，成功地定制了样式并实现了所需交互。案例代码包括多选和单选两种情况，适合根据需求进行复制和修改。

摘要由CSDN通过智能技术生成

一、案例简介

默认的复选框是方形的，有时候项目需求要改为圆形，这时候就很头疼啊，因为自己用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>

或者

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

关键点在于 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>

在这里插入图片描述

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>