資訊專欄INFORMATION COLUMN
摘要：瀏覽器自帶的單選鈕和多選框的樣式都比較單一，很多時候我們需要更換它們的樣式。
瀏覽器自帶的單選鈕和多選框的樣式都比較單一，很多時候我們需要更換它們的樣式。
HTML
關(guān)鍵：
1，label的for屬性綁定到input框的id屬性，這樣保證label再被點(diǎn)擊時也點(diǎn)擊了input單選鈕（label擁有了input的點(diǎn)擊性質(zhì)）
2，此時的input框可以被隱藏起來，將所有樣式寫到label上，做一個假的單選鈕樣式
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)的展示*/
效果
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114896.html
摘要：現(xiàn)在前端頁面效果日益豐富，默認(rèn)的組件樣式顯然不能滿足設(shè)計需求。前段時間開發(fā)項(xiàng)目中剛好接觸到相關(guān)的需求，在此特地整理下修改樣式的方法。它使用純編寫，沒有任何的文件。 現(xiàn)在前端頁面效果日益豐富，默認(rèn)的input組件樣式顯然不能滿足設(shè)計需求。前段時間開發(fā)項(xiàng)目中剛好接觸到相關(guān)的需求，在此特地整理下修改radio、CheckBox樣式的方法。 原理：大致原理都是使用原生的checkbox或inp...
摘要：現(xiàn)在前端頁面效果日益豐富，默認(rèn)的組件樣式顯然不能滿足設(shè)計需求。前段時間開發(fā)項(xiàng)目中剛好接觸到相關(guān)的需求，在此特地整理下修改樣式的方法。它使用純編寫，沒有任何的文件。 現(xiàn)在前端頁面效果日益豐富，默認(rèn)的input組件樣式顯然不能滿足設(shè)計需求。前段時間開發(fā)項(xiàng)目中剛好接觸到相關(guān)的需求，在此特地整理下修改radio、CheckBox樣式的方法。 原理：大致原理都是使用原生的checkbox或inp...
摘要：先看看純美化過后的和效果查看。項(xiàng)目地址在出現(xiàn)之前，我們美化和需要借助，最具代表性的就是，它功能強(qiáng)大復(fù)雜并且主題很多。為了更好的在項(xiàng)目中重用，我把美化的代碼寫成一個項(xiàng)目，叫，寓意像魔法一樣去美化和。 Radio和checkbox需要美化嗎？答案是必須的，因?yàn)樵O(shè)計風(fēng)格一直都會變化，原生的樣式百年不變肯定滿足不了需求。 先看看純CSS美化過后的radio和checkbox效果：查看。 項(xiàng)目地...
摘要：先看看純美化過后的和效果查看。項(xiàng)目地址在出現(xiàn)之前，我們美化和需要借助，最具代表性的就是，它功能強(qiáng)大復(fù)雜并且主題很多。為了更好的在項(xiàng)目中重用，我把美化的代碼寫成一個項(xiàng)目，叫，寓意像魔法一樣去美化和。 Radio和checkbox需要美化嗎？答案是必須的，因?yàn)樵O(shè)計風(fēng)格一直都會變化，原生的樣式百年不變肯定滿足不了需求。 先看看純CSS美化過后的radio和checkbox效果：查看。 項(xiàng)目地...
閱讀 2976·2021-10-15 09:41
閱讀 1635·2021-09-22 15:56
閱讀 2110·2021-08-10 09:43
閱讀 3283·2019-08-30 13:56
閱讀 1789·2019-08-30 12:47
閱讀 660·2019-08-30 11:17
閱讀 2777·2019-08-30 11:09
閱讀 2199·2019-08-29 16:19
