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:
<div class="radio-container">
<div class="radio-options">
<div class="toggle">Select Item</div>
<ul>
<li><input id="choice1" name="my-beer" type="radio" value="choice1" /> <label for="choice1">Item #1</label></li>
<li><input id="choice2" name="my-beer" type="radio" value="choice2" /> <label for="choice2">Item #2</label></li>
<li><input id="choice3" name="my-beer" type="radio" value="choice3" /> <label for="choice3">Item #3</label></li>
<li><input id="choice4" name="my-beer" type="radio" value="choice4" /> <label for="choice4">Item #4</label></li>
</ul>
</div>
</div>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.
Without additional class
Class .glow default round-small small
Class .glow success large round elastic
Class .glow invert xlarge round-large