在網頁中,有時需要修改單選按鈕的顏色以讓其與網頁主題風格相配,這就需要使用CSS樣式表技術來實現。
/* 修改單選按鈕默認顏色 */ input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 50%; width: 20px; height: 20px; border: 2px solid #888; } /* 自定義單選按鈕選中狀態(tài)顏色 */ input[type="radio"]:checked { background-color: #888; }
在上述代碼中,我們首先使用了appearance屬性將單選按鈕的默認樣式設為無,然后通過border-radius屬性設置圓形外觀。接著,通過border屬性設置邊框樣式和顏色,并使用width和height屬性設置單選按鈕的大小。這時,我們的單選按鈕就已經完成自定義。但是,由于我們未定義單選按鈕選中狀態(tài)的顏色,因此該狀態(tài)下單選按鈕的顏色仍會保持默認。
為此,我們需要再次使用CSS樣式表技術,在單選按鈕選中狀態(tài)下為其設置背景色,其代碼片段如下:
/* 自定義單選按鈕選中狀態(tài)顏色 */ input[type="radio"]:checked { background-color: #888; }
在上述代碼中,我們使用:checked偽類選擇器選中單選按鈕的選中狀態(tài),為其設定了背景色為#888,這樣就能讓選中狀態(tài)下的單選按鈕跟其他元素風格相配,更協(xié)調美觀了。