在前端開發(fā)中,經(jīng)常會(huì)遇到需要實(shí)現(xiàn)點(diǎn)擊文字選中復(fù)選框的情況。這種情況可以使用CSS的特殊選擇器來實(shí)現(xiàn)。其中,我們需要使用偽類選擇器:checked和相鄰兄弟選擇器+。
<input type="checkbox" id="checkbox"> <p for="checkbox">點(diǎn)擊我選中復(fù)選框</p> p[for="checkbox"]::before { content: ""; display: inline-block; width: 30px; height: 30px; background: #fff; border: 1px solid #ccc; margin-right: 10px; vertical-align: middle; cursor: pointer; } p[for="checkbox"]::after { content: "選中"; display: none; } input:checked+p::before { border: 1px solid #33c3f0; background: #33c3f0; } input:checked+p::after { display: inline-block; }
在上面的代碼中,我們首先定義了一個(gè)checkbox和一個(gè)p標(biāo)簽,p標(biāo)簽使用了for屬性來關(guān)聯(lián)checkbox。接下來,我們?cè)趐標(biāo)簽的::before偽元素中定義了一個(gè)模擬復(fù)選框的樣式,再在::after偽元素中定義了默認(rèn)的選中樣式。其中,content屬性可以用來插入內(nèi)容或字符。display屬性用來控制偽元素是否可見。
接下來,我們使用:checked偽類選擇器來選中已勾選的復(fù)選框,并使用相鄰兄弟選擇器+來選中緊接著復(fù)選框后面的p標(biāo)簽。在選中后,我們可以通過修改::before和::after的樣式來使用不同的樣式表示是否選中復(fù)選框。
最后,我們就可以通過點(diǎn)擊p標(biāo)簽來選中復(fù)選框并顯示選中效果了。