CSS3結(jié)合fontawesome字體實(shí)現(xiàn)自定義單選框復(fù)選框效果

hover_lew 發(fā)布于2019-08-20 12:35 / 1346人閱讀

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

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

一、首先上css代碼：

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

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

/*復(fù)選框效果*/
input[type=checkbox] {
    width:16px;
    height:16px;
    z-index:10;
}  /* 此處不解釋，定義的是復(fù)選框?qū)捀?/
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設(shè)置空的content實(shí)現(xiàn) */
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;
} /* 此處定義復(fù)選框選中時(shí)候的樣式，此處 在before的content里使用f00c的awesome字體來實(shí)現(xiàn)，這個(gè)字體值表示打勾*/
/* 單選框效果 */
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;
} /*以上的單選框和復(fù)選框類似，但此處選中不是采用更換字體，目前來說，沒發(fā)現(xiàn)有適合的字體適用于里面的圓點(diǎn)，所以采用after設(shè)置一個(gè)長寬為8像素的塊并設(shè)置圓角調(diào)整位置放到外層邊框內(nèi)容里實(shí)現(xiàn)*/

二、最后呈現(xiàn)的效果：

以上圖是我應(yīng)用的實(shí)際截圖。

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81071.html

相關(guān)文章

純CSS實(shí)現(xiàn)網(wǎng)站常用的五角星評分和分?jǐn)?shù)展示交互效果

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

Towers 2019-08-29 12:20 評論0 收藏0
純CSS實(shí)現(xiàn)網(wǎng)站常用的五角星評分和分?jǐn)?shù)展示交互效果

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

wyk1184 2019-08-20 15:31 評論0 收藏0
純CSS實(shí)現(xiàn)網(wǎng)站常用的五角星評分和分?jǐn)?shù)展示交互效果

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

Tony_Zby 2019-08-01 16:35 評論0 收藏0
總結(jié)：如何修改美化radio、checkbox的默認(rèn)樣式

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

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

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

Anshiii 2019-08-29 17:26 評論0 收藏0