CSS3Input單選是一種HTML表單元素中的單選按鈕類型,它可以使用CSS3技術來美化樣式和交互效果。
<input type="radio" name="sex" value="male"> <input type="radio" name="sex" value="female">
在上面的例子中,type屬性指定了這是一個單選按鈕,name屬性用于將兩個單選按鈕分組,value屬性定義了每個單選按鈕的值。
現在我們可以使用CSS3樣式來美化這些單選按鈕:
input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 2px solid #ccc; border-radius: 50%; width: 20px; height: 20px; outline: none; margin-right: 10px; } input[type="radio"]:checked { background-color: #008CBA; border-color: #008CBA; }
在上面的CSS代碼中,我們使用了appearance屬性來隱藏瀏覽器默認的單選按鈕樣式,并設置了自定義的樣式。其中,border屬性設置了按鈕的邊框樣式,border-radius屬性設置按鈕的圓角程度,width和height屬性設置按鈕的大小,outline屬性去除了按鈕的外邊框,margin-right屬性用于設置按鈕之間的間距。
而當一個按鈕被選中時,我們則使用:checked偽類選擇器來設置選中狀態的樣式,例如背景顏色和邊框顏色。
通過這些樣式的設置,我們可以讓單選按鈕看起來更加美觀和交互友好,提升用戶體驗。