CSS3在選擇器中提供了radio選中的特性,可以對radio進行樣式的設置,讓復選框具備更好的可讀性和美觀度。
/*樣式選擇器*/ input[type="radio"] { width: 20px; height: 20px; background-color: #eee; border-radius: 50%; outline: none; border: none; cursor: pointer; } input[type="radio"]:checked { background-color: #4CAF50; }
代碼中的input[type="radio"]表示選擇所有的單選按鈕,給其設置圓形、背景顏色、無邊框等樣式。而input[type="radio"]:checked則是表示單選按鈕被選中時的狀態,設置背景顏色為 #4CAF50,表示選中的效果。
通過CSS3的 radio選中,我們可以輕松定制單選按鈕的樣式,達到更好的視覺效果,增強用戶體驗。同時,在前端開發中,也有很多使用radio選中的場景,例如評分、性別選擇等。
上一篇css3 step1
下一篇css3 ntd