CSS 點擊radio實現(xiàn)兩個圖片樣式切換并且多個radio中只能有一個checked
我要評論我們實現(xiàn)被點擊的按鈕為紅色圖片樣式，即其它沒選中的按鈕為灰色圖片樣式，看下面圖片樣式：
1、首先我這里創(chuàng)建兩個radio：（也可以多聲明幾個，這里的數(shù)據(jù)正常是動態(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;
/* 增加新樣式:未選中時 */
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、說明：（有幾個關(guān)鍵性的樣式，其它的樣式自行調(diào)整）
1）隱藏原有的樣式 2）將原有的樣式替換成圖片使用的是url屬性 3）關(guān)于！important的用法：我的這篇文章有說明 4）background-size：cover屬性：把背景圖片放大到適合元素容器的尺寸，圖片比例不變，但是要注意，超出容器的部分可能會裁掉。（和background-size：100% 100%有點類似） 5）選中元素：checked來設(shè)置選中后的樣式。
4、經(jīng)過上面的步驟就可以實現(xiàn)點擊radio進行圖片樣式的切換，這是地址管理用到的一部分，點擊回到使用Vue.js實現(xiàn)地址管理。
總結(jié)
以上所述是小編給大家介紹的CSS 點擊radio實現(xiàn)兩個圖片樣式切換并且多個radio中只能有一個checked，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
利用純CSS自定義Checkbox和Radio的樣式示例代碼
大家應(yīng)該都知道Checkbox和Radio這兩個控件比較特殊，因為它在不同平臺的擁有不同的展示。所以這篇文章就來給大家介紹如何利用CSS3的一些屬性來實現(xiàn)自定義checkbox和radio樣2016-11-06一款純css3實現(xiàn)簡單的checkbox復(fù)選框和radio單選框
這篇文章主要為大家介紹了利用純css3實現(xiàn)一款簡單實用的checkbox復(fù)選框和radio單選框，代碼簡單易懂，可以直接復(fù)制，感興趣的可以進來看看哦2014-11-05純css3實現(xiàn)效果超級炫的checkbox復(fù)選框和radio單選框
天要為大家分享的是純css3實現(xiàn)的checkbox復(fù)選框和radio單選框，效果超級炫，這個實例完全由css3實現(xiàn)的沒有任何js代碼2014-09-01CSS3實例分享--超炫checkbox復(fù)選框和radio單選框
這篇文章主要介紹了CSS3實例分享--超炫checkbox復(fù)選框和radio單選框,需要的朋友可以參考下2014-09-01css3和jquery實現(xiàn)自定義checkbox和radiobox組件
這篇文章主要介紹了css3和jquery實現(xiàn)自定義美化Checkbox和Radiobox組件的示例,需要的朋友可以參考下2014-04-22