這篇文章主要介紹CSS中點(diǎn)擊radio如何實(shí)現(xiàn)兩個(gè)圖片樣式切換并且多個(gè)radio中只能有一個(gè)checked，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)長(zhǎng)期為上1000+客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為碭山企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站，碭山網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

我們實(shí)現(xiàn)被點(diǎn)擊的按鈕為紅色圖片樣式，即其它沒選中的按鈕為灰色圖片樣式，看下面圖片樣式：

1、首先我這里創(chuàng)建兩個(gè)radio：（也可以多聲明幾個(gè)，這里的數(shù)據(jù)正常是動(dòng)態(tài)獲取的）

<input type="radio" name="defaultAddress" class="address_manager_content-d3-left-img" />
<input type="radio" name="defaultAddress" class="address_manager_content-d3-left-img" />

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

.address_manager_content-d3-left-img{
 /* 隱藏原有樣式 */
 appearance: none;
 -webkit-appearance: none;
 outline: none;
 /* 增加新樣式:未選中時(shí) */
 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{/* 選中時(shí) */
   background: url(/public/app/gzh/images/address_manager_xz.png) no-repeat;
   background-size: cover;
}

3、說明：（有幾個(gè)關(guān)鍵性的樣式，其它的樣式自行調(diào)整）

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

4、經(jīng)過上面的步驟就可以實(shí)現(xiàn)點(diǎn)擊radio進(jìn)行圖片樣式的切換，這是地址管理用到的一部分，點(diǎn)擊回到使用Vue.js實(shí)現(xiàn)地址管理。  

以上是“CSS中點(diǎn)擊radio如何實(shí)現(xiàn)兩個(gè)圖片樣式切換并且多個(gè)radio中只能有一個(gè)checked”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：CSS中點(diǎn)擊radio如何實(shí)現(xiàn)兩個(gè)圖片樣式切換并且多個(gè)radio中只能有一個(gè)checked
文章來源：http://www.yijiale78.com/article30/gdcopo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁(yè)設(shè)計(jì)公司、品牌網(wǎng)站制作、全網(wǎng)營(yíng)銷推廣、手機(jī)網(wǎng)站建設(shè)、Google、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)