Colors

One of the more fun features of pretty checkbox is a wide range of built-in colors to make your controls even more stylish (or to provide users with visual feedback, your choice 😆).

There are five colors and they can be used two ways: solid or outline

Solid Colors

Like other selectors, colors are prefixed with p- and the the name of the color on div.state:

<div class="pretty p-default">

<input type="checkbox" />

<div class="state p-primary">

<label>Primary</label>

</div>

</div>

Primary

Success

Warning

Info

Danger

Outline Colors

Like solid colors, outline colors go on div.state, but with the suffix -o.

info

The nuisances of outline colors is easy to miss. The difference between solid and outlines colors is when we use the -o suffix we're also changing the colors of the input control's border.

<div class="pretty p-default">

<input type="checkbox" />

<div class="state p-primary-o">

<label>Primary</label>

</div>

</div>

Primary

Success

Warning

Info

Danger