一、案例简介
-
默认的复选框是方形的,有时候项目需求要改为圆形,这时候就很头疼啊,因为自己用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>
四、总结
需要融会贯通、整体代码不是很多,写完一个,其余复制出来即可。位置、样式均可变成其他样式,看自己的需求。