CSS可以通過修改單選按鈕的樣式來美化網頁,下面將介紹一些方法。
/* 隱藏原有單選按鈕 */ input[type=radio] { position: absolute; left: -9999px; } /* 自定義單選按鈕樣式 */ input[type=radio] + label { position: relative; cursor: pointer; } /* 未選擇狀態下的樣式 */ input[type=radio] + label:before { content: ""; display: inline-block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #999; margin-right: 10px; vertical-align: middle; } /* 選擇狀態下的樣式 */ input[type=radio]:checked + label:before { background-color: #009688; }
上述代碼首先隱藏了原有的單選按鈕,然后使用偽元素:before來創建自定義的按鈕樣式。樣式中使用了cursor屬性來改變鼠標的樣式為手型,增加了一些微調的屬性來讓單選按鈕更加美觀。最后,根據單選按鈕的選中狀態來修改樣式,提高用戶體驗。