Html單選按鈕自定義樣式

　　前言：

　　某天，寫了一個帶有單選按鈕的界面，突然想起網上其他網站各種各樣的單選按鈕，
遂想"改下這個圓圈圈怎么樣？"，于是在找了一遍單選按鈕的樣式，
沒一個說是修改圓圈圈，于是又去網上找了一遍，各種各樣，自己選了其中一種并稍加修改，感覺簡單通俗易懂，
而且最重要的是效果好，故在此和大家分享一下。
  

原理：
    之前已經提及，html的單選按鈕沒有提供一個樣式能修改其圓圈，
所以僅靠一句類似"color:#fff"的語句是不可能的，不過考慮：
    （A）html每個input都可以加一個label，點擊label，也會出發input的點擊：

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

是 否
    （C）input標簽可以隱藏：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

是 否
    （D）點擊label后，可以通過JS，修改其背景圖片:

（此處為圖片）

看到這里有沒有恍然大悟，什么自定義單選按鈕的圖標，
不過是把單選按鈕隱藏了，然后通過每次點擊修改label的背景圖片，
達到自定義的效果，而且后期需要把單選按鈕的圖標換成花花草草貓貓狗狗，
也不過是換下圖片而已。如果還不能實現，我們接著往下細談：

實現：

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

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

<label for="sex-man" class="radio_label checked"> 
    <input type="radio" value="1" checked="checked" id="sex-man" name="sex" /> 
    男 
</label>
            

                當前名稱：Html單選按鈕自定義樣式
                

                網站鏈接：http://m.kartarina.com/news8/159358.html
            
            

                                    成都網站建設公司_創新互聯，為您提供網站設計、小程序開發、網站設計公司、ChatGPT、動態網站、網站維護            
            

                廣告
                
            
            

                聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：
                創新互聯