Monaca Onsen UI Discord Chat Github Repo

Help with CSS and checkbox



  • Hello,
    I’ve read every question on stack overview. I’ve searched this forum extensively and used google to find any possible answers to how I can use standard CSS or modify onsen css. I can find no full source or examples to reference. I’ve spend several days trying to change a simple background color of the checked item input in onsen. I’d like to use the input element. It is currently blue background with a white checkmark. I want to change those two things. I suppose I could just us a regular input element, but I am trying to learn onsen. The CSS in onsen seems to be tied to the javascript, but I can’t find a reference that shows me how to refer to the element’s css. I see things in some few examples like:

    <div class="tabbar__label">My Label</div>
    

    There seems to be no place to see how to refer to all of the elements’ CSS. It is very daunting. Especially, when all I want to do is change the color of one element’s background.

    My code is as follows:

    <ons-list>
      <ons-list-item tappable>
        <label class="left">
          <ons-checkbox name="Q1" input-id="chk-1"></ons-checkbox>
        </label>
        <label for="chk-1" class="center">
          How to use CSS in Onsen?
        </label>
      </ons-list-item>
    

    Thank you for any help you might offer.
    -Rachel


  • administrators

    You could try generating your own Onsen UI theme here by selecting the Customize option:
    https://onsen.io/theme-roller/