html
<div class="checkbox_bx" onclick="checkboxF()">
<input class="checkbox" type="checkbox" value="1" name="boole" onclick="checkboxF()" />
<span>是否啟用服務(wù)</span>
</div>
css
.checkbox_bx {
display: flex;
align-items: center;
}
.checkbox_bx>span {
margin-left: 8px;
}
/*
* 總體樣式
* 去除默認(rèn)樣式
* .checkbox[type="checkbox"]
* 多種定義方式
*/
.checkbox {
width: 20px;
height: 20px;
border: 1px solid #aaaaaa;
position: relative;
border-radius: 50%;
outline: none;
/* 去除默認(rèn)樣式 */
-webkit-appearance: none;
background: transparent;
cursor: pointer;
}
/*
* 未選中樣式
* 如果沒(méi)有特殊樣式可以省略
* .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標(biāo)簽對(duì)事件委托不起作用，需要單獨(dú)在input上綁定事件。
outline
w3school
outline(輪廓)是繪制于元素周?chē)囊粭l線，位于邊框邊緣的外圍，可起到突出元素的作用。
注釋?zhuān)狠喞€不會(huì)占據(jù)空間，也不一定是矩形。outline簡(jiǎn)寫(xiě)屬性在一個(gè)聲明中設(shè)置所有的輪廓屬性。
MDN文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-603216.html
CSS的
outline屬性是在一條聲明中設(shè)置多個(gè)輪廓屬性的簡(jiǎn)寫(xiě)屬性 ，例如outline-style, outline-width和outline-color。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-603216.html
到了這里，關(guān)于html之input復(fù)選框變?yōu)閳A形、自定義復(fù)選框、消除默認(rèn)樣式、去除默認(rèn)樣式、事件代理、事件委托的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
