CSS 中的單選是指單選按鈕的樣式設(shè)置。單選是指只能選擇一個選項(xiàng)的控件,通常用于表單的選擇框中。
input[type="radio"] { display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #000; margin: 10px; vertical-align: middle; } input[type="radio"]:checked::before { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; background-color: #000; margin: 2px auto; }
上面的代碼片段是一個基本的單選樣式設(shè)置,通過 CSS 屬性設(shè)置選項(xiàng)按鈕的大小、邊框、圓角等。其中,input[type="radio"]
選擇器選擇了所有類型為單選按鈕的 input 元素,使用了inline-block
屬性使單選按鈕水平排列,并設(shè)置了一定的外邊距。而input[type="radio"]:checked::before
則使用了偽元素::before
給選中的單選按鈕添加了一個小圓點(diǎn)。
通過對單選樣式的設(shè)置,可以讓表單更加美觀、易用。但需要注意的是,跨瀏覽器的兼容性問題可能會存在一定的差異,需要進(jìn)行測試和調(diào)整。