Cool Checkboxes for Bulma.io
100% CSS based checkbox for Bulma.io
How to use
npm install cool-checkboxes-for-bulma.io
or
Include bulma-radio-checkbox.css
or bulma-radio-checkbox.min.css
from dist/css
folder in your page and you are good to go.
Demo
Click here for Demo
Check out my new project. You might be interested A Huge library of CSS Checkboxes
cool-checkboxes usage
I'm not sure but to make my project work with cool-checkboxes-for-bulma.io I added :
@import '~cool-checkboxes-for-bulma.io/dist/css/bulma-radio-checkbox.css';
to my main styles.css file. Is this normal because I can't find something in the documentation saying we have to do so to make it work. Moreover, I want to remove the outline when I click on the checkbox, is there a way I can work this out?"tick" icon is not displayed
Hello. I have an issue as my cool-checkbox doesn't display "tick" icon like this.
my code:
<div class="column"> <p class="title is-4">Cool Checkboxes</p> <div class="field"> <div class="b-checkbox"> <input id="checkbox1" class="styled" checked type="checkbox"> <label for="checkbox1"> Is Default </label> </div> </div> <div class="field"> <p class="control"> <div class="b-checkbox is-primary"> <input id="checkbox2" class="styled" checked type="checkbox"> <label for="checkbox2"> Is Primary </label> </div> </p> </div> <div class="field"> <p class="control"> <div class="b-checkbox is-success"> <input id="checkbox3" class="styled" checked type="checkbox"> <label for="checkbox3"> Is Success </label> </div> </p> </div> <div class="field"> <p class="control"> <div class="b-checkbox is-danger"> <input id="checkbox4" class="styled" checked type="checkbox"> <label for="checkbox4"> Is Danger </label> </div> </p> </div> <div class="field"> <p class="control"> <div class="b-checkbox is-info"> <input id="checkbox5" class="styled" checked type="checkbox"> <label for="checkbox5"> Is Info </label> </div> </p> </div> <div class="field"> <p class="control"> <div class="b-checkbox is-warning"> <input id="checkbox6" class="styled" checked type="checkbox"> <label for="checkbox6"> Is Warning </label> </div> </p> </div> <div class="field"> <p class="control"> <div class="b-checkbox is-dark"> <input id="checkbox7" class="styled" checked type="checkbox"> <label for="checkbox7"> Is Dark </label> </div> </p> </div> <div class="field"> <p class="control"> <div class="b-checkbox is-black"> <input id="checkbox8" class="styled" checked type="checkbox"> <label for="checkbox8"> Is Black </label> </div> </p> </div> </div>
Please, help. Thanks. 😃
NPM package.json
Thank you for your work on this.
I really like this stylesheet, but I'd like to be able to manage it as a dependency through
npm
oryarn
instead of having to clone it and include it directly in my project's repository.I would submit a PR for this, but I don't want to make any assumptions about your preferred
package.json
parameters.Overwritten modifier classes with Sass
Hi, i've overwritten the
is-primary
class to a different color in sass before importing bulma. Your css has hardcoded it to the default color. Any idea how i can gracefully combine the two, besides overwriting your css? Maybe provide a sass file for this package?refactoring css and html