成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

純css3漂亮的checkbox和radio美化效果插件Pretty.css插件

eechen / 1882人閱讀

摘要：插件介紹是一款純漂亮的和美化效果。可以和多種字體圖標(biāo)結(jié)合使用，對原生的和進(jìn)行美化，還可以制作按鈕點(diǎn)擊時(shí)的動(dòng)畫效果。支持的圖標(biāo)庫有安裝可以使用，或來安裝。

插件介紹

pretty.css是一款純css3漂亮的checkbox和radio美化效果。pretty.css可以和多種字體圖標(biāo)結(jié)合使用，對原生的checkbox和radio進(jìn)行美化，還可以制作按鈕點(diǎn)擊時(shí)的動(dòng)畫效果。

瀏覽器兼容性

演示地址：http://demo.jb51.net/js/2017/...

教程

pretty.css是一款純css3漂亮的checkbox和radio美化效果。pretty.css可以和多種字體圖標(biāo)結(jié)合使用，對原生的checkbox和radio進(jìn)行美化，還可以制作按鈕點(diǎn)擊時(shí)的動(dòng)畫效果。

pretty.css支持的圖標(biāo)庫有：

FONT AWESOME

BOOTSTRAP GLYPHICONS

MATERIAL DESIGN ICONS (MDI)

MATERIAL DESIGN ICONS (ZMDI)

TYPICONS

IONICONS

GOOGLE MATERIAL DESIGN ICONS

安裝

可以使用bower，npm或yarn來安裝pretty.css。

bower install pretty-checkbox
npm install pretty-checkbox
yarn add pretty-checkbox
使用方法

在頁面引入pretty.min.css文件及所需要的字體圖標(biāo)庫文件
HTML結(jié)構(gòu)

Checkbox的基本HTML結(jié)構(gòu)如下：

Radio的基本HTML結(jié)構(gòu)如下：

其中mdi mdi-*是material design圖標(biāo)。如果你想使用fontawesome，可以修改為fa fa-close

SCSS變量

pretty.css的基本scss變量設(shè)置如下：

$pretty--class-name: notsopretty; 
/* 
 */
 
$pretty--border-radius: 0;
 
$pretty--color-primary: #428bca;
$pretty--color-success: #5cb85c;
$pretty--color-info: #5bc0de;
$pretty--color-warning: #f0ad4e;
$pretty--color-danger: #d9534f;
$pretty--color-border: #b9b9b9;
$pretty--color-radio: #b9b9b9;
$pretty--color-bg: #fff;
 
/* Google material design icons */
$pretty--gmdi-class-name:"g-mdi";
$pretty--gmdi-name:"Material Icons";
$pretty--gmdi-attr:"data-icon";

pretty.css的github地址為：https://lokesh-coder.github.i...

注：更多關(guān)于美化checkbox和radio的插件，歡迎大家評論留言，謝謝。

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

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

相關(guān)文章

  • 總結(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 評論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 評論0 收藏0

  • 純CSS3美化 input 的checkbox 和 radio

    摘要：樣式復(fù)選框和單選按鈕看起來更漂亮。在線源碼使用你需要引入或者文件到你的工程或者中。 magic-input CSS3樣式復(fù)選框和單選按鈕看起來更漂亮。只有一個(gè)input元素。在線demo源碼：https://github.com/jaywcjlove/magic-input 使用 $ npm install magic-input 你需要引入 dist/magic-input.css或...

    lsxiao 評論0 收藏0

發(fā)表評論

0條評論

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