CSS3結合fontawesome字體實現自定義單選框復選框效果

hover_lew 發布于2019-08-20 12:35 / 1333人閱讀

摘要：經常能看到別人做前端的時候，實現一些漂亮的復選框或單選框按鈕，由于現在項目原因，很多單選框和復選框看起來很不好看，于是，心血來潮打算自己實現了一遍。

經常能看到別人做前端的時候，實現一些漂亮的復選框或單選框按鈕，由于現在項目原因，很多單選框和復選框看起來很不好看，于是，心血來潮打算自己實現了一遍。

一、首先上css代碼：

其中，說明我以注釋的形式寫到里面；

關于z-index我是基于一開始的定位考慮來設置的，此處如果誰要用到，自行思考；

/*復選框效果*/
input[type=checkbox] {
    width:16px;
    height:16px;
    z-index:10;
}  /* 此處不解釋，定義的是復選框寬高*/
input[type=checkbox]::before {
    content:" ";
    display:inline-block;
    color:#000;
    width:16px;
    height:16px;
    background:#fff;
    border:1px #1ab394 solid;
    z-index:9;
    position: absolute;
}/* 此處定義的是在沒有選中的情況下的樣式，利用::before設置空的content實現 */
input[type=checkbox]:checked::before {
    content:"f00c";
    color:#1ab394; 
    font: normal normal normal 14px/1 FontAwesome; 
    font-size: inherit; 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
} /* 此處定義復選框選中時候的樣式，此處 在before的content里使用f00c的awesome字體來實現，這個字體值表示打勾*/
/* 單選框效果 */
input[type=radio] {
    width:16px;
    height:16px;
    z-index:10;
}
input[type=radio]::before {
    content:" ";
    display:inline-block;
    color:#000;
    width:16px;
    height:16px;
    border-radius:8px;
    background:#fff;
    border:1px #1ab394 solid;
    z-index:9;
    position: absolute;
}
input[type=radio]:checked::after {
    content:" ";
    display:inline-block;
    width:8px;
    height:8px;
    background:#1ab394;
    border-radius:50%;
    position:absolute;
    z-index:11;
    top:4px;
    left:4px;
} /*以上的單選框和復選框類似，但此處選中不是采用更換字體，目前來說，沒發現有適合的字體適用于里面的圓點，所以采用after設置一個長寬為8像素的塊并設置圓角調整位置放到外層邊框內容里實現*/

二、最后呈現的效果：

以上圖是我應用的實際截圖。

GPU云服務器云服務器單選框 html打勾單選框 js單選框只讀 php 單選框取值

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

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

純CSS實現網站常用的五角星評分和分數展示交互效果

摘要：技術我們使用一些特殊的選擇器，然后配合單選框以及復選框自帶的一些特性，可以實現元素的顯示隱藏效果。當接口返回的分數是分的時候，剛好占據一半的星星，星半，只要計算出百分比就行，只用管數據，用上數據驅動的特點來動態展示樣式這個簡直不要太容易。最近做的一個項目涉及到評分和展示分數的模塊，UI設計師也給了幾個切好的圖片，實現五角星評分方式很多，本質愛折騰的精神和對性能追求以及便于維護的考慮，...

Towers 2019-08-29 12:20 評論0 收藏0
純CSS實現網站常用的五角星評分和分數展示交互效果

摘要：技術我們使用一些特殊的選擇器，然后配合單選框以及復選框自帶的一些特性，可以實現元素的顯示隱藏效果。當接口返回的分數是分的時候，剛好占據一半的星星，星半，只要計算出百分比就行，只用管數據，用上數據驅動的特點來動態展示樣式這個簡直不要太容易。最近做的一個項目涉及到評分和展示分數的模塊，UI設計師也給了幾個切好的圖片，實現五角星評分方式很多，本質愛折騰的精神和對性能追求以及便于維護的考慮，...

wyk1184 2019-08-20 15:31 評論0 收藏0
純CSS實現網站常用的五角星評分和分數展示交互效果

摘要：技術我們使用一些特殊的選擇器，然后配合單選框以及復選框自帶的一些特性，可以實現元素的顯示隱藏效果。當接口返回的分數是分的時候，剛好占據一半的星星，星半，只要計算出百分比就行，只用管數據，用上數據驅動的特點來動態展示樣式這個簡直不要太容易。最近做的一個項目涉及到評分和展示分數的模塊，UI設計師也給了幾個切好的圖片，實現五角星評分方式很多，本質愛折騰的精神和對性能追求以及便于維護的考慮，...

Tony_Zby 2019-08-01 16:35 評論0 收藏0
總結：如何修改美化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