css 單選按鈕圖標(biāo)替換的方法

2024-07-11 08:41:57

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

一.需求：替換單選按鈕默認(rèn)圖標(biāo)

二.原理：

　　1.使用label擴(kuò)大選擇熱區(qū)，隱藏input元素，

　　2.添加一個(gè)元素設(shè)置其背景圖作為默認(rèn)顯示的按鈕圖標(biāo)并顯示，

　　3.為該元素添加一個(gè)偽元素相對(duì)于添加的元素絕對(duì)定位且默認(rèn)不顯示，在該偽元素中添加默認(rèn)選中的背景圖

　　4.在input元素選中后，顯示該偽元素，因?yàn)閭卧厥墙^對(duì)定位層級(jí)比較高所以會(huì)顯示在上面，即選中的圖標(biāo)

三.HTML

<label><input name="price" type="radio" value="1" /><span className="show-radio"></span><p>100-500</p></label>

四.CSS

input{　　display:none}; .show-radio{　　display: inline-block;　　width:34px;　　height:35px;　　background:url('../../imgs/icons.png') no-repeat;　　background-position:-529px -180px;　　vertical-align: middle;　　position: relative;}.show-radio:before{　　content:'';　　display: none;　　width:34px;　　height:35px;　　background:url('../../imgs/icons.png') no-repeat;　　background-position:-474px -180px;　　vertical-align: middle;　　position:absolute;　　left:0;　　top:0;}input:checked~show-radio:before{　　display:block;}

五.效果