CSS多選復選框是一種可以讓用戶在多個選項中選擇一個或多個的控件。這種控件在Web應用程序中非常常見,特別是在問卷和調查中。在CSS中,通過使用:checked
偽類選擇符和~
選擇符,可以靈活地控制這種多選復選框。
/* 默認多選復選框樣式 */ input[type="checkbox"] { display: none; /* 隱藏原復選框 */ } /* 自定義多選復選框樣式 */ input[type="checkbox"] + label { display: inline-block; border: 1px solid #ccc; padding: 5px; cursor: pointer; } /* 選中自定義多選復選框樣式 */ input[type="checkbox"]:checked + label { background-color: #ccc; } /* 選中首個多選復選框的樣式 */ input[type="checkbox"]:first-of-type:checked + label { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } /* 選中末尾多選復選框的樣式 */ input[type="checkbox"]:last-of-type:checked + label { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } /* 選中中間多選復選框的樣式 */ input[type="checkbox"]:checked + label ~ input[type="checkbox"] + label { border-left: none; } /* 選中最后一個多選復選框的樣式 */ input[type="checkbox"]:checked:last-of-type + label { border-bottom-right-radius: 5px; } /* 選中第一個多選復選框的樣式 */ input[type="checkbox"]:checked:first-of-type + label { border-top-left-radius: 5px; }
在上述代碼中,input[type="checkbox"]
選擇器選擇所有的多選復選框,并將它們隱藏。然后,input[type="checkbox"] + label
選擇器選擇所有的關聯(lián)標簽,并將它們顯示為具有灰色邊框的行內塊元素。用戶單擊標簽時,與它關聯(lián)的多選復選框將被選中,并使標簽背景色變?yōu)榛疑?/p>
使用:checked
偽類選擇符,可以選擇選中的多選復選框,然后使用樣式規(guī)則改變標簽的樣式。使用~
選擇符,也可以選擇選中的多選復選框附近的其他標簽,這樣可以使選中的標簽之間的邊框消失。
以上CSS多選復選框的示例代碼可以應用于任何Web應用程序中的多選控件中。可以根據(jù)實際需要進行定制。通過使用CSS,可以輕松地創(chuàng)建具有吸引人外觀和強大交互性的多選復選框。