html之input复选框变为圆形、自定义复选框、消除默认样式、去除默认样式、事件代理、事件委托

---

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。