国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用純CSS美化radio和checkbox

Donne / 2452人閱讀

摘要：先看看純美化過后的和效果查看。項(xiàng)目地址在出現(xiàn)之前，我們美化和需要借助，最具代表性的就是，它功能強(qiáng)大復(fù)雜并且主題很多。為了更好的在項(xiàng)目中重用，我把美化的代碼寫成一個(gè)項(xiàng)目，叫，寓意像魔法一樣去美化和。

Radio和checkbox需要美化嗎？答案是必須的，因?yàn)樵O(shè)計(jì)風(fēng)格一直都會(huì)變化，原生的樣式百年不變肯定滿足不了需求。

先看看純CSS美化過后的radio和checkbox效果：查看。

項(xiàng)目地址：magic-check

在CSS出現(xiàn)之前，我們美化radio和checkbox需要借助JavaScript，最具代表性的就是icheck，它功能強(qiáng)大復(fù)雜并且主題很多。icheck這種美化方案很好很強(qiáng)大，但是也有很多缺點(diǎn)：

太重，需要引入JS、CSS，還有圖片或者字體圖標(biāo)，而且還依賴jQuery

擴(kuò)展性差，Pure js項(xiàng)目還好，如果是Angular.js、React、Vue.js或者M(jìn)eteor項(xiàng)目，一般都需要自己對(duì)icheck做wrapper

樣式自定義性不好，修改樣式只能重新做圖

事件行為跟原生不一致

可維護(hù)性差、復(fù)雜，誰(shuí)用誰(shuí)知道

所以，如果的項(xiàng)目不需兼容古董瀏覽器的話，用CSS美化radio和checkbox是最好的選擇，這樣什么都不用依賴，只需CSS，無JS，無圖片，無字體圖標(biāo)。

為了更好的在項(xiàng)目中重用，我把美化的代碼寫成一個(gè)項(xiàng)目，叫magic-check，寓意像魔法一樣去美化radio和checkbox。

用法非常簡(jiǎn)單，最好用Bower和npm進(jìn)行管理，先Install：

bower: ?bower install --save magic-check

npm:? npm install --save magic-check

然后加載CSS文件：

然后，只要給input元素加上一個(gè)CSS類magic-checkbox或magic-radio就可以：

Radio

Checkbox

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

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

相關(guān)文章

  • 用純CSS美化radio和checkbox

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

    terro 評(píng)論0 收藏0

  • 用純CSS美化radio和checkbox

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

    rubyshen 評(píng)論0 收藏0

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

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

    asce1885 評(píng)論0 收藏0

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

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

    Anshiii 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<