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

eechen 發布于2019-08-30 15:44 / 1865人閱讀

摘要：插件介紹是一款純漂亮的和美化效果。可以和多種字體圖標結合使用，對原生的和進行美化，還可以制作按鈕點擊時的動畫效果。支持的圖標庫有安裝可以使用，或來安裝。

插件介紹

pretty.css是一款純css3漂亮的checkbox和radio美化效果。pretty.css可以和多種字體圖標結合使用，對原生的checkbox和radio進行美化，還可以制作按鈕點擊時的動畫效果。

瀏覽器兼容性

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

教程

pretty.css支持的圖標庫有：

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文件及所需要的字體圖標庫文件

HTML結構

Checkbox的基本HTML結構如下：


  
   Primary

Radio的基本HTML結構如下：


  
   Option 1


  
   Option 2

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

SCSS變量

pretty.css的基本scss變量設置如下：

$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...

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

云服務器 GPU云服務器 js漂亮的效果 wordpress無法搜索和安裝插件 javaee的插件 koajs的插件

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116256.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
純CSS3美化 input 的checkbox 和 radio

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

lsxiao 2019-08-30 12:59 評論0 收藏0