色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css點(diǎn)擊文字復(fù)選框選中

在前端開發(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ù)選框并顯示選中效果了。