如果直接對單選按鈕設定樣式，那麼這個偽類並不實用，因為沒有多少樣式能夠對單選按鈕起作用。不過，倒是可以基於單選按鈕的勾選狀態借助組合選擇符來給其他元素設定樣式。
很多時候，無論是為了表單元素統一，還是為了使用者體驗良好，我們都會選擇 label 元素和 input[type="radio"] 一起使用。當元素與單選按鈕關聯之後，也可以起到觸發開關的作用。
思路：1. 可以為元素新增生成性內容(偽元素)，並基於單選按鈕的狀態來為其設定樣式；
2. 然後把真正的單選按鈕隱藏起來；
3. 最後把生成內容美化一下。
解決方法：
1. 一段簡單的結構**：開啟
關閉
input[type="radio"] + label::before {
content: " "; /*不換行空格*/
display: inline-block;
vertical-align: middle;
font-size: 18px;
width: 20px;
height: 20px;
margin-right: .4em;
border-radius: 50%;
background: url(../../images/helper/off.png);/*原始按鈕位址*/
現在的樣子：
原來的單選按鈕仍然可見，但是我們先給單選按鈕的勾選狀態新增樣式：
3. 給單選按鈕的勾選狀態新增不同的樣式：
input[type="radio"]:checked + label::before {
content: " "; /*不換行空格*/
display: inline-block;
vertical-align: middle;
font-size: 18px;
width: 20px;
height: 20px;
margin-right: .4em;
border-radius: 50%;
background: url(../../images/helper/on.png); /*選中的按鈕位址*/
現在的樣子：
4. 現在把原來的單選按鈕隱藏：
input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
現在的樣子：
隱藏原來的單選按鈕時，如果使用 display: none; 的話，那樣會把它從鍵盤 tab 鍵切換焦點的佇列中完全刪除。
於是可採用剪下的方式，讓剪下後的尺寸為零，這樣就隱藏了原來的單選按鈕。
自定義單選按鈕
foo checked before,input type checkbox foo checked,input type checkbox label before input type checkbox checked label before foo沒有引用任何特定的元素，它只是在阻止瀏覽器在...
改變單選按鈕radio的預設樣式
預設的radio的樣式很醜，那麼如何改變其預設的樣式呢？我最開始想的是能不能直接給radio設定背景色等，發現並沒有用！可以借助於標籤來建立乙個類似於radio的效果。先來看下效果 html 如下 在校生 非在校生 樣式如下 choice choice radio choice radio inpu...
自定義按鈕樣式
在一些 上經常可以看到改造過的按鈕選項比如這樣 最常見的自定義按鈕樣式，其實是用label模擬的,關於label可以在mdn進行查閱 label的for與表單的id對應，點選click對應的表單被啟用 click 通過上面的例子知道了，只要label的for屬性和表單的id對應，那麼點選label就...