CSS3復(fù)選框打鉤樣式 在Web開發(fā)中，復(fù)選框是常用的用戶交互元素之一。然而，瀏覽器默認(rèn)的復(fù)選框樣式并不總是符合我們的需求，因此我們需要自定義它們的樣式。 在CSS3中，我們可以使用一些新的屬性和偽元素來實(shí)現(xiàn)自定義復(fù)選框的打鉤樣式。 首先，我們需要隱藏原始的復(fù)選框，然后使用偽元素:before和:after來創(chuàng)建我們自己的復(fù)選框。 ```html

復(fù)選框

``` ```css .checkbox input { display: none; } .checkmark { display: inline-block; position: relative; width: 20px; height: 20px; border: 1px solid gray; border-radius: 5px; margin-right: 5px; } .checkmark:before, .checkmark:after { content: ""; position: absolute; left: 6px; top: 2px; width: 4px; height: 9px; background: transparent; transform-origin: bottom left; border-radius: 2px; } .checkmark:before { transform: rotate(45deg); border: 3px solid #0078d7; border-top: none; border-right: none; } .checkmark:after { transform: rotate(-45deg); border: 3px solid #0078d7; border-top: none; border-left: none; } .label-text { display: inline-block; } ``` 上述代碼中，我們給checkbox的input元素設(shè)置了display:none，將其隱藏起來。 然后，我們使用偽元素:before和:after來創(chuàng)建我們自己的復(fù)選框。我們給它們?cè)O(shè)置了寬度、高度、背景和邊框等樣式屬性，并使用transform屬性來實(shí)現(xiàn)旋轉(zhuǎn)的效果。最后，我們使用border-radius屬性來創(chuàng)建圓角效果。 最后，我們?cè)趶?fù)選框的下方添加了一個(gè)文本標(biāo)簽label-text來說明選擇的內(nèi)容。 通過以上代碼，我們實(shí)現(xiàn)了簡(jiǎn)單的復(fù)選框打鉤樣式，可以根據(jù)實(shí)際需求進(jìn)行進(jìn)一步的樣式定制。