Help with CSS and checkbox

LittleOldLady

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

emccorson

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