Checkbox
Font Awesome Bootstrap Checkboxes & Radios. Pure css way to make inputs look prettier.Browser standard
<form class="checkbox-form-demo">
<input type="checkbox" name="thing" value="Bike"> I have a bike<br>
<input type="checkbox" name="thing" value="Car"> I have a car<br>
<input type="checkbox" name="thing" value="Car"> I have a cat<br>
<input type="checkbox" name="thing" value="PC" checked> I've got a computer<br>
</form>
Basic
<form>
<div class="checkbox">
<input id="checkbox1" class="styled" type="checkbox" checked>
<label for="checkbox1">Default</label>
</div>
<div class="checkbox checkbox-primary">
<input id="checkbox2" class="styled" type="checkbox" checked>
<label for="checkbox2">Primary</label>
</div>
<div class="checkbox checkbox-success">
<input id="checkbox3" class="styled" type="checkbox" checked>
<label for="checkbox3">Success</label>
</div>
<div class="checkbox checkbox-info">
<input id="checkbox4" class="styled" type="checkbox" checked>
<label for="checkbox4">Info</label>
</div>
<div class="checkbox checkbox-warning">
<input id="checkbox5" type="checkbox" class="styled" checked>
<label for="checkbox5">Warning</label>
</div>
<div class="checkbox checkbox-danger">
<input id="checkbox6" type="checkbox" class="styled" checked>
<label for="checkbox6">Check me out</label>
</div>
</form>Circled
<form>
<div class="checkbox checkbox-circle">
<input id="checkbox7" class="styled" type="checkbox" checked>
<label for="checkbox7">Default</label>
</div>
<div class="checkbox checkbox-primary checkbox-circle">
<input id="checkbox8" class="styled" type="checkbox" checked>
<label for="checkbox8">Primary</label>
</div>
<div class="checkbox checkbox-success checkbox-circle">
<input id="checkbox9" class="styled" type="checkbox" checked>
<label for="checkbox9">Success</label>
</div>
<div class="checkbox checkbox-info checkbox-circle">
<input id="checkbox10" class="styled" type="checkbox" checked>
<label for="checkbox10">Info</label>
</div>
<div class="checkbox checkbox-warning checkbox-circle">
<input id="checkbox11" class="styled" type="checkbox" checked>
<label for="checkbox11">Warning</label>
</div>
<div class="checkbox checkbox-danger checkbox-circle">
<input id="checkbox12" class="styled" type="checkbox" checked>
<label for="checkbox12">Danger</label>
</div>
</form>Disabled
<form>
<div class="checkbox">
<input class="styled" id="checkbox13" type="checkbox" disabled>
<label for="checkbox13">Can't check this</label>
</div>
<div class="checkbox checkbox-primary">
<input class="styled styled" id="checkbox14" type="checkbox" disabled checked>
<label for="checkbox14">This too</label>
</div>
<div class="checkbox checkbox-success checkbox-circle">
<input class="styled" id="checkbox15" type="checkbox" disabled checked>
<label for="checkbox15">And this</label>
</div>
<div class="checkbox checkbox-info checkbox-circle">
<input class="styled" id="checkbox16" type="checkbox" disabled>
<label for="checkbox16">And this</label>
</div>
<div class="checkbox checkbox-warning checkbox-circle">
<input class="styled" id="checkbox17" type="checkbox" disabled>
<label for="checkbox17">And this</label>
</div>
<div class="checkbox checkbox-danger checkbox-circle">
<input class="styled" id="checkbox18" type="checkbox" disabled checked>
<label for="checkbox18">And this</label>
</div>
</form>No label
<form>
<div class="checkbox">
<input type="checkbox" class="styled" id="singleCheckbox1" value="option1" checked aria-label="Single checkbox One">
<label> </label>
</div>
<div class="checkbox checkbox-primary">
<input type="checkbox" class="styled styled-primary" id="singleCheckbox2" value="option2" checked aria-label="Single checkbox Two">
<label> </label>
</div>
<div class="checkbox checkbox-success">
<input type="checkbox" class="styled styled-primary" id="singleCheckbox3" value="option3" checked aria-label="Single checkbox Two">
<label> </label>
</div>
<div class="checkbox checkbox-info">
<input type="checkbox" class="styled styled-primary" id="singleCheckbox4" value="option4" checked aria-label="Single checkbox Two">
<label> </label>
</div>
<div class="checkbox checkbox-warning">
<input type="checkbox" class="styled styled-primary" id="singleCheckbox5" value="option5" checked aria-label="Single checkbox Two">
<label> </label>
</div>
<div class="checkbox checkbox-danger">
<input type="checkbox" class="styled styled-primary" id="singleCheckbox6" value="option6" checked aria-label="Single checkbox Two">
<label> </label>
</div>
</form>Inline
<form>
<div class="checkbox checkbox-inline">
<input type="checkbox" class="styled" id="inlineCheckbox1" value="option1" checked>
<label for="inlineCheckbox1">Inline One</label>
</div>
<div class="checkbox checkbox-primary checkbox-inline">
<input type="checkbox" class="styled" id="inlineCheckbox2" value="option1" checked>
<label for="inlineCheckbox2">Inline Two</label>
</div>
<div class="checkbox checkbox-success checkbox-inline">
<input type="checkbox" class="styled" id="inlineCheckbox3" value="option1" checked>
<label for="inlineCheckbox3">Inline Three</label>
</div>
<div class="checkbox checkbox-info checkbox-inline">
<input type="checkbox" class="styled" id="inlineCheckbox4" value="option1" checked>
<label for="inlineCheckbox4">Inline Four</label>
</div>
<div class="checkbox checkbox-warning checkbox-inline">
<input type="checkbox" class="styled" id="inlineCheckbox5" value="option1" checked>
<label for="inlineCheckbox5">Inline Five</label>
</div>
<div class="checkbox checkbox-danger checkbox-inline">
<input type="checkbox" class="styled" id="inlineCheckbox6" value="option1" checked>
<label for="inlineCheckbox6">Inline Six</label>
</div>
</form>Radio
Browser standard
<form class="checkbox-form-demo">
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Basic
<form>
<div class="radio">
<input type="radio" name="radio1" id="radio1" value="option1">
<label for="radio1">Default</label>
</div>
<div class="radio radio-primary">
<input type="radio" name="radio1" id="radio2" value="option2">
<label for="radio2">Primary</label>
</div>
<div class="radio radio-success">
<input type="radio" name="radio1" id="radio3" value="option3">
<label for="radio3">Success</label>
</div>
<div class="radio radio-info">
<input type="radio" name="radio1" id="radio4" value="option4" checked>
<label for="radio4">Info</label>
</div>
<div class="radio radio-warning">
<input type="radio" name="radio1" id="radio5" value="option5">
<label for="radio5">Warning</label>
</div>
<div class="radio radio-danger">
<input type="radio" name="radio1" id="radio6" value="option6">
<label for="radio6">Danger</label>
</div>
</form>Disabled
<form>
<div class="radio">
<input type="radio" name="radio3" id="radio15" value="option1" disabled>
<label for="radio15">Default</label>
</div>
<div class="radio radio-primary">
<input type="radio" name="radio3" id="radio16" value="option2" disabled>
<label for="radio16">Primary</label>
</div>
<div class="radio radio-success">
<input type="radio" name="radio3" id="radio17" value="option3" disabled>
<label for="radio17">Success</label>
</div>
<div class="radio radio-info">
<input type="radio" name="radio3" id="radio18" value="option4" disabled>
<label for="radio18">Info</label>
</div>
<div class="radio radio-warning">
<input type="radio" name="radio3" id="radio19" value="option5" disabled>
<label for="radio19">Warning</label>
</div>
<div class="radio radio-danger">
<input type="radio" name="radio3" id="radio20" value="option6" checked disabled>
<label for="radio20">Danger</label>
</div>
</form>As checkbox
<form>
<div class="checkbox checkbox">
<input type="radio" name="radio4" id="radio7" value="option1">
<label for="radio7">Default</label>
</div>
<div class="checkbox checkbox-primary">
<input type="radio" name="radio4" id="radio8" value="option2">
<label for="radio8">Primary</label>
</div>
<div class="checkbox checkbox-success">
<input type="radio" name="radio4" id="radio9" value="option3">
<label for="radio9">Success</label>
</div>
<div class="checkbox checkbox-info">
<input type="radio" name="radio4" id="radio10" value="option4">
<label for="radio10">Info</label>
</div>
<div class="checkbox checkbox-warning">
<input type="radio" name="radio4" id="radio11" value="option5" checked>
<label for="radio11">Warning</label>
</div>
<div class="checkbox checkbox-danger">
<input type="radio" name="radio4" id="radio12" value="option6">
<label for="radio12">Danger</label>
</div>
</form>No label
<form>
<div class="radio">
<input type="radio" id="singleRadio1" value="option1" name="radioSingle1" aria-label="Single radio One">
<label> </label>
</div>
<div class="radio radio-primary">
<input type="radio" id="singleRadio2" value="option2" name="radioSingle1" aria-label="Single radio Two">
<label> </label>
</div>
<div class="radio radio-success">
<input type="radio" id="singleRadio3" value="option3" name="radioSingle1" checked aria-label="Single radio Three">
<label> </label>
</div>
<div class="radio radio-info">
<input type="radio" id="singleRadio4" value="option4" name="radioSingle1" aria-label="Single radio Four">
<label> </label>
</div>
<div class="radio radio-warning">
<input type="radio" id="singleRadio5" value="option5" name="radioSingle1" aria-label="Single radio Five">
<label> </label>
</div>
<div class="radio radio-danger">
<input type="radio" id="singleRadio6" value="option6" name="radioSingle1" aria-label="Single radio Six">
<label> </label>
</div>
</form>Inline
<form>
<div class="radio radio-inline">
<input type="radio" id="inlineRadio1" value="option1" name="radioInline" checked>
<label for="inlineRadio1">Inline One</label>
</div>
<div class="radio radio-inline radio-primary">
<input type="radio" id="inlineRadio2" value="option2" name="radioInline">
<label for="inlineRadio2">Inline Two</label>
</div>
<div class="radio radio-inline radio-success">
<input type="radio" id="inlineRadio3" value="option3" name="radioInline">
<label for="inlineRadio3">Inline Three</label>
</div>
<div class="radio radio-inline radio-info">
<input type="radio" id="inlineRadio4" value="option4" name="radioInline">
<label for="inlineRadio4">Inline Four</label>
</div>
<div class="radio radio-inline radio-warning">
<input type="radio" id="inlineRadio5" value="option5" name="radioInline">
<label for="inlineRadio5">Inline Five</label>
</div>
<div class="radio radio-inline radio-danger">
<input type="radio" id="inlineRadio6" value="option6" name="radioInline">
<label for="inlineRadio6">Inline Six</label>
</div>
</form>⌃
Copyright © 2019 Kate. All Rights Reserved. 7prism
