自定義input checkbox或者radio的樣式

李增田發布于2019-08-30 11:17 / 652人閱讀

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

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

HTML


    
    這是一個單選鈕

關鍵：
1，label的for屬性綁定到input框的id屬性，這樣保證label再被點擊時也點擊了input單選鈕（label擁有了input的點擊性質）
2，此時的input框可以被隱藏起來，將所有樣式寫到label上，做一個假的單選鈕樣式

CSS

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

效果

云服務器 GPU云服務器自定義按鈕樣式 h5視頻播放器可自定義樣式自定義鏡像的使用請教自定義控件的問題

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114896.html

總結：如何修改美化radio、checkbox的默認樣式

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

asce1885 2019-08-02 12:09 評論0 收藏0
總結：如何修改美化radio、checkbox的默認樣式

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

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

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

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

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

terro 2019-08-30 12:47 評論0 收藏0