文章目录
html
<div class="checkbox_bx" onclick="checkboxF()">
<input class="checkbox" type="checkbox" value="1" name="boole" onclick="checkboxF()" />
<span>是否启用服务</span>
</div>
css
.checkbox_bx {
display: flex;
align-items: center;
}
.checkbox_bx>span {
margin-left: 8px;
}
/*
* 总体样式
* 去除默认样式
* .checkbox[type="checkbox"]
* 多种定义方式
*/
.checkbox {
width: 20px;
height: 20px;
border: 1px solid #aaaaaa;
position: relative;
border-radius: 50%;
outline: none;
/* 去除默认样式 */
-webkit-appearance: none;
background: transparent;
cursor: pointer;
}
/*
* 未选中样式
* 如果没有特殊样式可以省略
* .checkbox[type="checkbox"]::before
*/
.checkbox::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: transparent;
border-radius: 50%;
}
/*
* 选中样式
* 不能使用padding属性
* .checkbox[type="checkbox"]:checked::before
*/
.checkbox:checked::before {
content: "";
width: 70%;
height: 70%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #409eff;
border-radius: 50%;
}
JavaScript
// 事件代理(委托)
function checkboxF() {
let checkbox = document.querySelector('.checkbox');
checkbox.checked = !checkbox.checked;
}
注意
input
标签对事件委托不起作用,需要单独在input
上绑定事件。
outline
w3school
outline
(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
注释:轮廓线不会占据空间,也不一定是矩形。
outline
简写属性在一个声明中设置所有的轮廓属性。
MDN
CSS的
outline
属性是在一条声明中设置多个轮廓属性的简写属性 ,例如outline-style, outline-width和outline-color。