這篇文章主要介紹CSS中點擊radio如何實現兩個圖片樣式切換并且多個radio中只能有一個checked，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創新互聯長期為上1000+客戶提供的網站建設服務，團隊從業經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態環境。為碭山企業提供專業的成都網站設計、做網站，碭山網站改版等技術服務。擁有10多年豐富建站經驗和眾多成功案例,為您定制開發。

我們實現被點擊的按鈕為紅色圖片樣式，即其它沒選中的按鈕為灰色圖片樣式，看下面圖片樣式：

1、首先我這里創建兩個radio：（也可以多聲明幾個，這里的數據正常是動態獲取的）

2、為radio添加樣式：CSS代碼：

.address_manager_content-d3-left-img{
 /* 隱藏原有樣式 */
 appearance: none;
 -webkit-appearance: none;
 outline: none;
 /* 增加新樣式:未選中時 */
 display: inline-block;
 width: 20px;
 height: 20px;
 position: static;
 margin : 15px 5px 0 0!important;
 background: url(/public/app/gzh/images/address_manager_wxz.png) no-repeat;
 background-size: cover;
}
.address_manager_content-d3-left-img:checked{/* 選中時 */
   background: url(/public/app/gzh/images/address_manager_xz.png) no-repeat;
   background-size: cover;
}

3、說明：（有幾個關鍵性的樣式，其它的樣式自行調整）

1）隱藏原有的樣式 2）將原有的樣式替換成圖片使用的是url屬性 3）關于！important的用法：我的這篇文章有說明 4）background-size：cover屬性：把背景圖片放大到適合元素容器的尺寸，圖片比例不變，但是要注意，超出容器的部分可能會裁掉。（和background-size：100% 100%有點類似） 5）選中元素：checked來設置選中后的樣式。

4、經過上面的步驟就可以實現點擊radio進行圖片樣式的切換，這是地址管理用到的一部分，點擊回到使用Vue.js實現地址管理。  

以上是“CSS中點擊radio如何實現兩個圖片樣式切換并且多個radio中只能有一個checked”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！