Custom Checkboxes And Radio Buttons For Bulma Framework

Preview:

Description:

This package contains two CSS libraries that enable you to create beautiful custom checkbox and radio button inputs in the Bulma framework.

See Also:

• CSS Switch Control Extension For Bulma Framework

How to use it:

1. Download and load the following CSS files in your Bulma framework.

<!-- Bulma -->
<link rel="stylesheet" href="/path/to/bulma.min.css" />
<!-- Bulma Checkbox -->
<link rel="stylesheet" href="/path/to/bulma-checkbox-master/css/main.min.css">
<!-- Bulma Radio Button -->
<link rel="stylesheet" href="/path/to/bulma-radio-master/css/main.min.css">

2. Add custom checkboxes and radio buttons to the page.

<!-- Checkboxes -->
<label class="b-checkbox checkbox">
  <input type="checkbox" value="false" checked>
  <span class="check"></span>
  <span class="control-label">Checked</span>
</label>
<label class="b-checkbox checkbox">
  <input type="checkbox" value="false" class="is-indeterminate">
  <span class="check"></span>
  <span class="control-label">Indeterminate</span>
</label>
<label disabled="disabled" class="b-checkbox checkbox is-disabled">
  <input type="checkbox" disabled="disabled" value="false">
  <span class="check"></span>
  <span class="control-label">Disabled</span>
</label>
<!-- Radio Buttons -->
<label class="b-radio radio">
  <input type="radio" name="group_1" value="One" checked>
  <span class="check"></span>
  <span class="control-label">Checked</span>
</label>
<label class="b-radio radio">
  <input type="radio" name="group_1" value="Two">
  <span class="check"></span>
  <span class="control-label">Basic</span>
</label>
<label class="b-radio radio is-disabled" disabled>
  <input type="radio" name="group_1" value="Disabled" disabled>
  <span class="check"></span>
  <span class="control-label">Disabled</span>
</label>

3. Set the size of the checkbox & radio button using the following CSS classes:

• is-small
• is-medium
• is-large

<label class="b-checkbox checkbox is-small">
  <input type="checkbox" value="false" checked>
  <span class="check"></span>
  <span class="control-label">Checked</span>
</label>
<label class="b-checkbox checkbox is-medium">
  <input type="checkbox" value="false" class="is-indeterminate">
  <span class="check"></span>
  <span class="control-label">Indeterminate</span>
</label>
<label disabled="disabled" class="b-checkbox checkbox is-disabled is-large">
  <input type="checkbox" disabled="disabled" value="false">
  <span class="check"></span>
  <span class="control-label">Disabled</span>
</label>

4. Change the color of the checkbox & radio buttons using the following CSS classes:

• is-info
• is-success
• is-danger
• is-warning

<label class="b-checkbox checkbox">
  <input type="checkbox" value="false" checked>
  <span class="check is-info"></span>
  <span class="control-label">Checked</span>
</label>
<label class="b-checkbox checkbox is-medium">
  <input type="checkbox" value="false" class="is-indeterminate">
  <span class="check is-success"></span>
  <span class="control-label">Indeterminate</span>
</label>
<label disabled="disabled" class="b-checkbox checkbox is-disabled is-large">
  <input type="checkbox" disabled="disabled" value="false">
  <span class="check is-danger"></span>
  <span class="control-label">Disabled</span>
</label>
<label class="b-radio radio">
  <input type="radio" name="group_1" value="One" checked>
  <span class="check is-warning"></span>
  <span class="control-label">Checked</span>
</label>