Cool CSS based checkbox for Bulma.io

  • By Aslam Shah
  • Last update: Oct 8, 2022
  • Comments: 5

Comments(5)

  • 1

    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?

  • 2

    "tick" icon is not displayed

    Hello. I have an issue as my cool-checkbox doesn't display "tick" icon like this. image

    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. 😃

  • 3

    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 or yarn 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.

  • 4

    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?

  • 5

    refactoring css and html

    • Refactoring with reference to Bootstrap's Custom Checkbox.
    • Some parts that depended on Font Awesome remained, so fix it so that it does not depend on it.
    • Added css class so that labels can be displayed on the left side.
    • Modify index.html as above.