css中div和spand,Pretty-Checkbox

pretty-checkbox.css

A pure CSS library to beautify checkbox and radio buttons.

Features

Basic

Shapes - Square, Curve, Round

Variants - Default, Fill, Thick

Colors - Primary, Success, Info, Warning, Danger

Color types - Solid, Outline

Animations - Smooth, Tada, Jelly, Pulse, Rotate

Switch - iOS style - Outline, Fill, Slim

Responsive

No JavaScript

Custom Font Icons

SVG Icons

Image support

Toggle between icons / SVG's / images

Lock

State - Focus, Hover, Indeterminate

Supports frameworks - Bootstrap, Foundation, Sematic UI, Bulma, ...

SCSS customization

Supports all modern browsers, including mobile devices

Print friendly

and more... ( I am kidding, that's all! )

Installation

From CLI

Install the library from npm or yarn package manager

> npm installpretty-checkbox // or

> yarn add pretty-checkbox

Add pretty-checkbox.min.css in your html

From CDN ( jsDelivr )

Manual download ( Github )

Download the source from Github.

is where the library is downloaded.

SCSS

You can also import pretty-checkbox.scss in your main scss file.

@import '~pretty-checkbox/src/pretty-checkbox.scss';

Please refer the document for SCSS settings.

Usage

Pretty checkbox comes with many styles,

Class name

Description

p-default

Basic style

p-switch

iOS like toggle style

p-icon

Custom font icons

p-svg

Custom SVG files, markup

p-image

Tiny images

And three shapes p-round p-curve p-square (default)

Basic checkbox

Check me

Basic checkbox has three variants p-fill p-thick p-outline (default)

You can combine them.

Fill

---

Switch checkbox

Switch has three variants p-outline p-fill p-slim

On

---

Custom Font icons

Check me

Note: class `icon` should be added along with icon class names

Note: For icons to work, you need to add appropriate font icons library. In above example , we used font awesome icon. So, FontAwesome should be included separately.

---

SVG

Supports SVG file in

tag, markup ( ... ) and sprites

Check me

Note: class `svg` to be added in img tag or svg tag.

---

Image

Supports any type of valid image format.

Block

Note: class `image` to be added in img tag.

---

Colors

There are five solid colors p-primary p-success p-warning p-info p-danger

And five outline colors p-primary-o p-success-o p-warning-o p-info-o p-danger-o

Warning

Note: Color class must be added in state class. Solid colors and Ouline colors have distinct role in font icons and toggle feature.

More

There are more features like Radio buttons , Toggle , States , Animations , Border less , Lock , Scale, SCSS Settings.

Please refer the documentation to know about them.

Browser support

Works in all modern browsers.

Chrome >= 26 Firefox >= 16 Safari >= 6.1 Opera >= 15 IE >= 9

Font Icon libraries

SVG

Libraries

Inspiration

Contributions

Thanks to all those good people who spend their valuable time and helped to improve this library. Any Contributions are welcome!

License

This project is licensed under the MIT License

❤