awesome-foundation6-checkbox
v2.0.3
Published
Awesome Foundation6 Checkbox ==========================
Downloads
47
Readme
Awesome Foundation6 Checkbox
Font Awesome Foundation 6 Checkboxes & Radios plugin. Pure CSS way to make inputs look prettier. No Javascript!
Use
First just include awesome-foundation-checkbox.css somewhere in your HTML, or add the equivalent files to your Sass configuration.
<form role="form">
...
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
...
</form>
We have to alter it a bit:
<form role="form">
...
<div class="checkbox">
<input type="checkbox" id="checkbox1">
<label for="checkbox1">
Check me out
</label>
</div>
...
</form>
That's it. It will work. But it will not work if you nest input inside label or put label before input.
If you want to enable Opera 12 and earlier support just add class styled
to input
element:
...
<input type="checkbox" id="checkbox1" class="styled">
...
Browser support
- Firefox (3.6+)
- Chrome (14+)
- IE (9+)
- Opera (11.6+)
- Safari (6+)
Radios
It's the same for radios. Markup has to be the following:
<form role="form">
...
<div class="radio">
<input type="radio" name="radio2" id="radio3" value="option1">
<label for="radio3">
One
</label>
</div>
<div class="radio">
<input type="radio" name="radio2" id="radio4" value="option2" checked>
<label for="radio4">
Two
</label>
</div>
...
</form>
Brand Colors and other features
You may use primary
, alert
, secondary
, etc to style checkboxes and radios with base foundation colors.
checkbox-circle
is for rounded checkboxes.
Inputs without label text:
<div class="checkbox">
<input type="checkbox" class="styled" id="singleCheckbox1" value="option1" aria-label="Single checkbox One">
<label></label>
</div>
Using Sass
As per example in the demo
folder, to use Font Awesome you'll have to @import
the following library parts:
@import "../bower_components/foundation-sites/assets/foundation";
@import "../bower_components/font-awesome/scss/variables";
@import "../awesome-foundation6-checkbox";
Adjust this to the path where your foundation and font-awesome files are located.
Credits
Based on the [Official Foundation6 Sass port][Foundation6 Sass] and the awesome Font Awesome.