Author: | justboil |
---|---|
Views Total: | 211 views |
Official Page: | Go to website |
Last Update: | March 13, 2023 |
License: | MIT |
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:
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>