自定義input checkbox或者radio的樣式

李增田發(fā)布于2019-08-30 11:17 / 654人閱讀

摘要：瀏覽器自帶的單選鈕和多選框的樣式都比較單一，很多時(shí)候我們需要更換它們的樣式。

瀏覽器自帶的單選鈕和多選框的樣式都比較單一，很多時(shí)候我們需要更換它們的樣式。

HTML


    
    這是一個(gè)單選鈕

關(guān)鍵：
1，label的for屬性綁定到input框的id屬性，這樣保證label再被點(diǎn)擊時(shí)也點(diǎn)擊了input單選鈕（label擁有了input的點(diǎn)擊性質(zhì)）
2，此時(shí)的input框可以被隱藏起來(lái)，將所有樣式寫(xiě)到label上，做一個(gè)假的單選鈕樣式

CSS

/*隱藏input*/
input[type="radio"] {
    display: none;
}
/*label虛擬選擇器添加單選鈕未點(diǎn)擊狀態(tài)樣式*/
input[type="radio"]+label:before {
    background: url(../images/radio-check-out.png);
}
/*label虛擬選擇器添加單選鈕點(diǎn)擊狀態(tài)樣式*/
input[type="radio"]:checked+label:before {
    background: url(../images/radio-check-in.png);
}
/*樣式上完成單選框狀態(tài)的展示*/

效果

GPU云服務(wù)器云服務(wù)器自定義按鈕樣式 h5視頻播放器可自定義樣式自定義鏡像的使用請(qǐng)教自定義控件的問(wèn)題

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/114896.html

相關(guān)文章

總結(jié)：如何修改美化radio、checkbox的默認(rèn)樣式

摘要：現(xiàn)在前端頁(yè)面效果日益豐富，默認(rèn)的組件樣式顯然不能滿足設(shè)計(jì)需求。前段時(shí)間開(kāi)發(fā)項(xiàng)目中剛好接觸到相關(guān)的需求，在此特地整理下修改樣式的方法。它使用純編寫(xiě)，沒(méi)有任何的文件。現(xiàn)在前端頁(yè)面效果日益豐富，默認(rèn)的input組件樣式顯然不能滿足設(shè)計(jì)需求。前段時(shí)間開(kāi)發(fā)項(xiàng)目中剛好接觸到相關(guān)的需求，在此特地整理下修改radio、CheckBox樣式的方法。原理：大致原理都是使用原生的checkbox或inp...

asce1885 2019-08-02 12:09 評(píng)論0 收藏0
總結(jié)：如何修改美化radio、checkbox的默認(rèn)樣式

摘要：現(xiàn)在前端頁(yè)面效果日益豐富，默認(rèn)的組件樣式顯然不能滿足設(shè)計(jì)需求。前段時(shí)間開(kāi)發(fā)項(xiàng)目中剛好接觸到相關(guān)的需求，在此特地整理下修改樣式的方法。它使用純編寫(xiě)，沒(méi)有任何的文件。現(xiàn)在前端頁(yè)面效果日益豐富，默認(rèn)的input組件樣式顯然不能滿足設(shè)計(jì)需求。前段時(shí)間開(kāi)發(fā)項(xiàng)目中剛好接觸到相關(guān)的需求，在此特地整理下修改radio、CheckBox樣式的方法。原理：大致原理都是使用原生的checkbox或inp...

Anshiii 2019-08-29 17:26 評(píng)論0 收藏0
用純CSS美化radio和checkbox

摘要：先看看純美化過(guò)后的和效果查看。項(xiàng)目地址在出現(xiàn)之前，我們美化和需要借助，最具代表性的就是，它功能強(qiáng)大復(fù)雜并且主題很多。為了更好的在項(xiàng)目中重用，我把美化的代碼寫(xiě)成一個(gè)項(xiàng)目，叫，寓意像魔法一樣去美化和。 Radio和checkbox需要美化嗎？答案是必須的，因?yàn)樵O(shè)計(jì)風(fēng)格一直都會(huì)變化，原生的樣式百年不變肯定滿足不了需求。先看看純CSS美化過(guò)后的radio和checkbox效果：查看。項(xiàng)目地...

Donne 2019-08-19 17:37 評(píng)論0 收藏0
用純CSS美化radio和checkbox

摘要：先看看純美化過(guò)后的和效果查看。項(xiàng)目地址在出現(xiàn)之前，我們美化和需要借助，最具代表性的就是，它功能強(qiáng)大復(fù)雜并且主題很多。為了更好的在項(xiàng)目中重用，我把美化的代碼寫(xiě)成一個(gè)項(xiàng)目，叫，寓意像魔法一樣去美化和。 Radio和checkbox需要美化嗎？答案是必須的，因?yàn)樵O(shè)計(jì)風(fēng)格一直都會(huì)變化，原生的樣式百年不變肯定滿足不了需求。先看看純CSS美化過(guò)后的radio和checkbox效果：查看。項(xiàng)目地...

terro 2019-08-30 12:47 評(píng)論0 收藏0