3. Help with CSS and checkbox

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Help with CSS and checkbox

  • L

    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

    0
  • E
    administrators

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

    0