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

復選框

``` ```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元素設置了display:none，將其隱藏起來。 然后，我們使用偽元素:before和:after來創建我們自己的復選框。我們給它們設置了寬度、高度、背景和邊框等樣式屬性，并使用transform屬性來實現旋轉的效果。最后，我們使用border-radius屬性來創建圓角效果。 最后，我們在復選框的下方添加了一個文本標簽label-text來說明選擇的內容。 通過以上代碼，我們實現了簡單的復選框打鉤樣式，可以根據實際需求進行進一步的樣式定制。