更改ion-checkbox

Question

我想改变离子复选框内的复选标记的颜色。该复选框具有白色背景，并且复选标记为白色，以使得复选标记为黑色而不是白色。这就是我到目前为止所拥有的

.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>

Answer 1

我很确定你实际上必须使用border-color来调整复选标记颜色

所以在这里澄清一下你能做什么：

在<ion-checkbox>内添加自己custom-checkbox的自定义类，然后在该类中添加以下内容：

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

检查时会改变复选标记的颜色。

Answer 2

您可以使用某些css-属性来更改<ion-checkbox>的颜色

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

您可以在ion-checkbox documentation

中找到更多信息。