The input check box of html becomes round, custom check box, eliminate default style, remove default style, event proxy, event delegation

---

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;
}

---

Notice

inputLabels have no effect on event delegation, and need to inputbind events on them separately.

---

outline

w3school

outlineAn (outline) is a line drawn around an element, outside the edge of a border, to accentuate the element.
Note: Outlines do not take up space and are not necessarily rectangular.
outlineThe shorthand property sets all profile properties in one declaration.

MDN

CSS properties are shorthandoutline for setting multiple outline properties in one declaration , such as outline-style , outline-width , and outline-color .