Select, CheckBox & RadioBox

Extends appearance of the forms standard controls (CheckBox, RadioBox & Select).

Styling simple CheckBox.

Add class .simple-checkbox to the <input type="checkbox"> element. After it add element <label>. See example below.

CSS3 Checkbox Styles

Create outer <DIV> element and add to it required class. Inside <DIV> add <input type="checkbox"> element. After input add element <label>. See examples below.

Checkbox Sliders Style.

Class .slideOne

Class .slideTwo

Class .slideThree

Checkbox Rounded Style.

Class .roundedOne

Class .roundedTwo

Checkbox Squared Style.

Class .squaredOne

Class .squaredTwo

Class .squaredThree

Class .squaredFour

Styling simple Select element.

Create outer <DIV> element and add to it class .css-simple. Inside <DIV> add <select> <option> structure. See example below.

Styling advanced Select element.

Create outer <DIV> element and add to it class .selectParent. Inside <DIV> add <select> <option> structure. With outer <DIV> you can use 11 additional classes. Class .glow - for border shadowing. 5 color modifiers classes: .success, .info, .warning, .danger or .invert. 3 round borders modifiers classes: .round, .round-small or .round-large. And 2 size classes: .small or .large. See examples below.

Class glow

Class glow-info round small

Class glow-invert round-large large

Drop-Down Select.

For this element you need to create specific HTML structure with parent outer outer <DIV> which must have class .radio-container. See code below:

Show Source

With parent outer <DIV> you can use 15 additional classes. Class .glow - for border shadowing. 6 color modifiers classes: .default, .success, .info, .warning, .danger or .invert. 3 round borders modifiers classes: .round, .round-small or .round-large. And 4 size classes: .xsmall,.small, .large or .xlarge. If you want to change drop-down animation add class .elastic. See examples below.

Select Item

Without additional class

Select Item

Class .glow default round-small small

Select Item

Class .glow success large round elastic

Select Item

Class .glow invert xlarge round-large

This page has been viewed: 1981 time(s)