前言：

某天，寫了一個帶有單選按鈕的界面，突然想起網上其他網站各種各樣的單選按鈕，

遂想"改下這個圓圈圈怎么樣？"，于是在找了一遍單選按鈕的樣式，

沒一個說是修改圓圈圈，于是又去網上找了一遍，各種各樣，自己選了其中一種并稍加修改，感覺簡單通俗易懂，

而且最重要的是效果好，故在此和大家分享一下。

原理：

之前已經提及，html的單選按鈕沒有提供一個樣式能修改其圓圈，

所以僅靠一句類似"color:#fff"的語句是不可能的，不過考慮：

(A)html每個input都可以加一個label，點擊label，也會出發(fā)input的點擊：

是 否

(B)label標簽可以加背景，并通過其他樣式，讓背景顯示在文字的左邊：

是 否

(C)input標簽可以隱藏：

是 否

(D)點擊label后，可以通過JS，修改其背景圖片:

(此處為圖片)

看到這里有沒有恍然大悟，什么自定義單選按鈕的圖標，

不過是把單選按鈕隱藏了，然后通過每次點擊修改label的背景圖片，

達到自定義的效果，而且后期需要把單選按鈕的圖標換成花花草草貓貓狗狗，

也不過是換下圖片而已。如果還不能實現(xiàn)，我們接著往下細談：

實現(xiàn)：

原理中說的四點，也可以看作實現(xiàn)的自定義單選按鈕的四部曲：

A：沒啥好說的，就是標簽使用。

男

B:

設置背景：

background: url(images/o_radio_bk.png) no-repeat;

設置背景大小：

background-size：20px 40px;

(這里我的背景圖是兩個圖標上下接在一起的，故高度為背景的兩倍)

設置顯示方式：

display: inline-block;

(設置label為行內塊元素，讓它能有寬高，而且不換行)

設置高度和行高：

height: 20px;line-height: 20px;

設置文字靠右一點：

text-indent:20px;

C：隱藏單選按鈕：display:none;

D: 這一步我使用的JQuery，主要為了方便。首先定義了一個被選中的css的class，

另外給所有的單選按鈕點擊時都添加了一個方法：找出所有name相同的單選按鈕的label，

去掉他們被選中的樣式，然后給自己加上一個選中的樣式。

選中的樣式：

.checked {

background-position: 0 -20px;

}

這里我用了background-position，把背景圖向上偏移20px，從而把選中的圖片顯示出來。

添加點擊處理方法：

$(function(){

//給所有的單選按鈕點擊添加處理

$("input[type=’radio’]").click(function(){

//找出和當前name一樣的單選按鈕對應的label，并去除選中的樣式的class

$("input[type=’radio’][name=’"+$(this).attr(’name’)+"’]").parent().removeClass("checked")；

//給自己對應的label

$(this).parent().addClass("checked");

});

});

最后：

如果想修改其他標簽，或者給其他標簽(比如：多選框)添加樣式，也可以嘗試這種辦法。

總結

以上是生活随笔為你收集整理的html单选框只能点圆圈,Html单选按钮自定义样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。