Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://lokesh-coder.github.io/pretty-checkbox/ below:

Pretty checkbox | Custom checkbox and radio buttons in pure css

A pure CSS library to beautify checkbox and radio buttons

Step 1 : Download from yarn or npm

	             
    > yarn add pretty-checkbox  //or
    > npm install pretty-checkbox

Alternatively, you can also use CDN link

	
    https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css

Step 2 : Add dist/pretty-checkbox.min.css file in your html or import src/pretty-checkbox.scss file in your scss file

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

Step 3 : Add the mark up in your file. Can be used with Bootstrap, Foundation, Bulma frameworks.

	
    <div class="pretty p-default">
        <input type="checkbox" />
        <div class="state">
            <label>Check</label>
        </div>
    </div>

These are simple checkboxes with three shapes. Add class p-default as like mentioned in above example.

By default, it will be in Square shape. To change, add class p-curve or p-round.

Add class p-switch. For shapes add class, p-outline or p-fill or p-slim

There are five colors. . Can be used as Solid ( p-primary ) or Outline ( p-primary-o ).

To apply colors, add class p-primary to .state class inside .pretty

Show colors for all combinations

Hide combinations

Colors can be added, removed, changed from SCSS settings.

You can add any font icons to replace basic checkbox styles. There are two classes to be added. First, p-icon to .pretty. Then add icon class along with font icon classes inside .state .

This library doesnt comes with any font icons. You need to add appropriate font icon library in your application. In above example, we have used mdi mdi-check, which is from Material design icons library. So, we need to add that library.

Adding svg icon is very similar to adding font icons. Add class p-svg to .pretty and svg to <svg> tag or <img> tag ( if svg file url is used as img source ).

SVG's are quite different and unpredictable to apply colors properly. This library tries to color it based on few assumptions. Sometimes, it might return weird results. Dont curse me, in those cases.

Adding image is also similar approach like above. Add class p-image to .pretty anf image to <img> tag.

Good news is, images are automatically resized to fit in to the checkbox. But still, its wise to use small and transparent images for better results. And Obviously, colors are not applicable to images, unless I am the GOD.

To animate, add class p-smooth or p-jelly or p-tada or p-rotate or p-pulse to .pretty

Due to the nature of different checkbox design, certain animations are not applicable in some combinations that were disussed below.

To remove the border ( when checkbox is checked ) add class p-plain to .pretty.

Toggles are simple show / hide type. Add class p-toggle to .pretty.

Previously, we have seen example with one state. Now we need to add similar state. Each one will have class p-on and p-off class. By default p-off state will be visible. On checking, p-on will be visible.

Show preview

Hide preview

Checkbox styles cannot be mixed. If it is p-svg style, both states should be svg.

These are checkbox and radio button states like hover, focus, indeterminate. Please check the example code for details.

Remember me

Remembered for 15 days

Normal disabled attribute in checkbox is enough.

It is quite similar to disable, but the only difference is, it will lock and make it look like active. To lock, add class p-locked to .pretty

Basically, all the checkbox and radio buttons are sized based on the font size. Bigger the font size, bigger the checkbox and radio. Sometimes, you might need to scale it bit bigger. To do so, add class p-bigger to .pretty

Alternatively, we can also set font-size property to class .pretty

Styling radio buttons are very similar to checkbox. All those features mentioned above, will wotk for radio buttons.

Here's the tested font icon libraries. But however, other icon libraries, and icons created from icomoon, fontastic should also work.

glyphicon-heart-empty

glyphicon-heart info

zmdi-favorite

zmdi-favorite-outline

typcn-heart

typcn-heart-outline

ion-ios-heart

ion-ios-heart-outline

favorite_border favorite_border

favorite favorite

Some font icons might have inaccurate 'X' aspect ratio or some alignment issue. In those cases, the icon will have minute extra space in top or bottom. No worries, it is quite easy to fix it youself :)

These are couple of well known svg libraries which is tested at this moment.

But my instict says, other libraries also should work.

    // If you felt the name is not-so-pretty,
    // you can always change!

    $pretty--class-name: pretty;

    // are you sure, you wanna change my handpicked
    // awesome super duper colors?

    $pretty--color-default:#bdc3c7;
    $pretty--color-primary:#428bca;
    $pretty--color-info:#5bc0de;
    $pretty--color-success:#5cb85c;
    $pretty--color-warning:#f0ad4e;
    $pretty--color-danger:#d9534f;
    $pretty--color-dark:#5a656b;

    // uh, boring z-index stuff, who cares.

    $pretty--z-index-back:0;
    $pretty--z-index-between:1;
    $pretty--z-index-front:2;

    // nobody will change this.

    $pretty--debug:false;
    $pretty--dev-err:'Invalid input type!';

    /* REQUIRED */
    @import '~pretty-checkbox/scss/variables';
    @import '~pretty-checkbox/scss/core';

    /* OPTIONALS */
    @import '~pretty-checkbox/scss/elements/default/fill';
    @import '~pretty-checkbox/scss/elements/default/outline';
    @import '~pretty-checkbox/scss/elements/default/thick';

    @import '~pretty-checkbox/scss/elements/font-icon/general';

    @import '~pretty-checkbox/scss/elements/svg/general';

    @import '~pretty-checkbox/scss/elements/image/general';

    @import '~pretty-checkbox/scss/elements/switch/general';
    @import '~pretty-checkbox/scss/elements/switch/fill';
    @import '~pretty-checkbox/scss/elements/switch/slim';

    @import '~pretty-checkbox/scss/extras/toggle';
    @import '~pretty-checkbox/scss/extras/plain';
    @import '~pretty-checkbox/scss/extras/round';
    @import '~pretty-checkbox/scss/extras/curve';
    @import '~pretty-checkbox/scss/extras/animation';
    @import '~pretty-checkbox/scss/extras/disabled';
    @import '~pretty-checkbox/scss/extras/locked';
    @import '~pretty-checkbox/scss/extras/colors';
    @import '~pretty-checkbox/scss/extras/print';

    @import '~pretty-checkbox/scss/states/hover';
    @import '~pretty-checkbox/scss/states/focus';
    @import '~pretty-checkbox/scss/states/indeterminate';

Works in all latest browsers.

10

25

40

8

25

Thanks to all those good people who spend their valuable time and helped to improve this library. And hey, if you

, or would like to

, you are always welcome!

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4