在 HTML 代碼中添加單選按鈕是比較簡單的,但是如何使用 CSS 使單選按鈕樣式更加美觀和符合設計要求呢?下面我們就來介紹一些常用的方法。
/* 單選按鈕基本樣式 */ input[type="radio"] { cursor: pointer; /* 鼠標懸停時展示手型光標 */ } /* 去掉默認樣式 */ input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; } /* 在單選按鈕右側添加樣式 */ input[type="radio"] + label::before { content: "\2022"; /* 添加實心圓點 */ margin-right: 5px; /* 右側間距 */ font-size: 20px; /* 字體大小 */ color: #aaa; /* 默認顏色 */ } /* 單選按鈕選中時顯示的樣式 */ input[type="radio"]:checked + label::before { content: "\2022"; /* 實心圓點 */ color: #ff8800; /* 選中顏色 */ }
通過以上 CSS 樣式,可以給單選按鈕添加實心圓點,并且在按鈕選中時使圓點變成指定的顏色。我們還可以通過其他的樣式來進行個性化設計,比如添加背景、邊框、文字等等,具體根據需求來定。