---

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。