首页 前端知识 css案例15——复选框样式修改(复选框变为圆角)

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

2024-03-13 00:03:51 前端知识 前端哥 221 399 我要收藏

一、案例简介

  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>

或者

<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>

请添加图片描述

四、总结

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3719.html
标签
评论
发布的文章

JavaScript基础库

2024-04-09 00:04:11

解决vue npm 下载echart出错

2024-04-09 00:04:05

Echarts中option属性设置

2024-04-08 23:04:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!