Custom Checkboxes And Radio Buttons For Bulma Framework

Category: CSS & CSS3 , Form | March 13, 2023
Author:justboil
Views Total:413 views
Official Page:Go to website
Last Update:March 13, 2023
License:MIT

Preview:

Custom Checkboxes And Radio Buttons For Bulma Framework

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:

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>

You Might Be Interested In:


Leave a Reply