CODEWITHSUNDEEP
csscheckboxionic-frameworkcolorsless
David Ramirez
David Ramirez

Reputation: 217

Changing the color of checkmark inside ion-checkbox

I'm tring to change the color of the checkmark inside the ion-checkbox. The checkbox has a white background and the the checkmark is white Im tring to get the checkmark to be black not white. This is what I have so far

.checkbox-icon::before {
  background-color: white !important;
 
}

.checkbox-icon::after {
  color: black !important;
}
      <ion-item ng-repeat="list in modal.item.modifier_lists | orderBy: 'ordinal'"
                ng-if="list.modifier_options[0].name">
        <div ng-if="list.modifier_options.length === 1"
               class="row">
          <div class="col">
            <ion-checkbox ng-model="list.modifier_options[0].selected"
                          ng-checked="list.modifier_options[0].selected"
                          class="button-orange checkbox-stable">
              <span class="pull-right">{{list.modifier_options[0].name}}</span>
            </ion-checkbox>
          </div>
        </div>
      </ion-item>

Upvotes: 2

Views: 8118

Answers (2)

Mattias
Mattias

Reputation: 840

Some of the css- properties you can use to change the coloring of the <ion-checkbox> are

  --checkmark-color: black;
  --background-checked: white;
  --border-color: black;
  --border-color-checked: black;

You can find more information in the ion-checkbox documentation

Upvotes: 6

joshsisley
joshsisley

Reputation: 310

I'm pretty sure you actually have to use border-color to adjust the checkmark color

So to clarify here is what you could do:

Inside your <ion-checkbox> add a custom class of your own custom-checkbox and then for that class do whats below:

.custom-checkbox .checkbox-icon:after {
    border-color: //whatever you like it to be
}

That will change the color of the check mark when it is checked.

Upvotes: 0

Related Questions