下面是详细讲解“纯CSS设置Checkbox复选框控件的样式(五种方法)”的完整攻略:
纯CSS设置Checkbox复选框控件的样式(五种方法)
1.使用伪类
通过给input[type=checkbox]
设置伪类来实现复选框的样式修改。
/* 选中 */
input[type=checkbox]:checked + label::before {
content: '\2713'; /* 加入对勾 */
color: #fff;
background-color: #007acc;
}
/* 未选中 */
input[type=checkbox] + label::before {
content: '';
border: 1px solid #aaa;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
margin-right: 10px; /* 留出右侧空隙 */
text-align: center;
line-height: 20px; /* 居中对齐 */
cursor: pointer;
box-sizing: border-box;
}
2.使用CSS自定义属性
使用CSS自定义属性来控制复选框的样式。
:root {
--checkbox-color: #007acc;
--checkbox-size: 16px;
}
/* 选中 */
input[type=checkbox]:checked + label::before {
content: '\2713'; /* 加入对勾 */
color: #fff;
background-color: var(--checkbox-color);
}
/* 未选中 */
input[type=checkbox] + label::before {
content: '';
border: 1px solid #aaa;
display: inline-block;
vertical-align: middle;
width: var(--checkbox-size);
height: var(--checkbox-size);
margin-right: 10px; /* 留出右侧空隙 */
text-align: center;
line-height: var(--checkbox-size); /* 居中对齐 */
cursor: pointer;
box-sizing: border-box;
}
3.使用图像
利用图像来替代原有的复选框图标。
/* 选中 */
input[type=checkbox]:checked + label::before {
background-image: url('checked.png');
}
/* 未选中 */
input[type=checkbox] + label::before {
background-image: url('unchecked.png');
}
4.使用伪元素
使用伪元素来模拟复选框。
/* 外框 */
input[type=checkbox] + label::before {
content: '';
display: inline-block;
vertical-align: middle;
width: 16px;
height: 16px;
margin-right: 10px; /* 留出右侧空隙 */
border: 1px solid #aaa;
box-sizing: border-box;
}
/* 内框 */
input[type=checkbox]:checked + label::before::after {
content: '';
display: block;
width: 10px;
height: 10px;
margin: 2px;
background: #007acc;
}
5.使用SVG
使用SVG来实现复选框的样式修改。
/* SVG图标 */
svg {
width: 16px;
height: 16px;
}
/* 选中 */
input[type=checkbox]:checked + label::before svg path {
fill: #007acc;
}
/* 未选中 */
input[type=checkbox] + label::before svg path {
fill: #fff;
stroke: #aaa;
stroke-width: 1px;
}
以上就是“纯CSS设置Checkbox复选框控件的样式(五种方法)”的完整攻略。下面附上两条示例说明:
示例1:使用伪类
<input type="checkbox" id="check">
<label for="check">选项</label>
/* 选中 */
input[type=checkbox]:checked + label::before {
content: '\2713'; /* 加入对勾 */
color: #fff;
background-color: #007acc;
}
/* 未选中 */
input[type=checkbox] + label::before {
content: '';
border: 1px solid #aaa;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
margin-right: 10px; /* 留出右侧空隙 */
text-align: center;
line-height: 20px; /* 居中对齐 */
cursor: pointer;
box-sizing: border-box;
}
示例2:使用图像
<input type="checkbox" id="check" class="css-checkbox">
<label for="check" class="css-label">选项</label>
/* 选中 */
.css-checkbox:checked + .css-label {
background-image: url('checked.png');
}
/* 未选中 */
.css-label {
background-image: url('unchecked.png');
background-position: 0 0;
padding-left: 20px;
background-repeat: no-repeat;
}
.css-checkbox {
display: none;
}
希望以上内容能够对你有所帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:纯CSS设置Checkbox复选框控件的样式(五种方法) - Python技术站