Change color of checkbox

ionic-v1
1

Just wrapping my head around ionic’s css.
How do I add a different color to checkbox? e.g.

  <ion-content class="has-header">
    <ul class="list">
      <li ng-repeat="key in taskKeys"
          ng-click="toggleTask(key)"
          ng-class="{active: activeTasks[key].finished === true}">
        <ion-checkbox ng-model="isChecked" checkbox-royal>{{ activeTasks[key].title }}</ion-checkbox>
      </li>
    </ul>
  </ion-content>

where do I put checkbox-royal?

2

ended up moving to the non angularjs approach

  <ion-content class="has-header">
    <ul class="list">
      <li class="item item-checkbox"
          ng-repeat="key in taskKeys">
        <label class="checkbox checkbox-royal">
          <input type="checkbox">
        </label>
        {{ activeTasks[key].title }}
      </li>
    </ul>
  </ion-content>
3

You could have simply done it like this:

<ion-content class="has-header">
    <ul class="list">
      <li ng-repeat="key in taskKeys"
          ng-click="toggleTask(key)"
          ng-class="{active: activeTasks[key].finished === true}">
        <ion-checkbox ng-model="isChecked" class="checkbox-royal">{{ activeTasks[key].title }}</ion-checkbox>
      </li>
    </ul>
</ion-content>
4

Long time ago, but still can be interesting.

You just add a class like:

< label class=“checkbox checkbox-royal”>
< input type=“checkbox” ng-model=“privacy.access”>
</ label>

And in your customized CSS file (probably style.css) :

.checkbox-royal input:before,
.checkbox-royal .checkbox-icon:before {
border-color: blue;
}

.checkbox-royal input:checked:before,
.checkbox-royal input:checked + .checkbox-icon:before {
background: blue;
border-color: blue;
}