更改 ion-checkbox 内复选标记的颜色答案

【问题标题】：Changing the color of checkmark inside ion-checkbox更改 ion-checkbox 内复选标记的颜色
【发布时间】：2017-11-22 06:10:39
【问题描述】：

我正在尝试更改 ion-checkbox 内复选标记的颜色。复选框有白色背景，复选标记是白色的，我想让复选标记是黑色而不是白色。这就是我目前所拥有的

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

【问题讨论】：

每ionicframework.com/docs/api/components/checkbox/Checkbox你改变border-color.checkbox-inner
.checkbox-inner 我必须将这个类添加到 html 中还是它是为 ion-checkbox @MichaelCoker 内置的类
对不起，我不知道。我从来没有用过离子。如果您有一个渲染复选框的工作演示，我可以告诉您要更改哪些 CSS。所以我去离子网站看看他们是否有演示。我能做的最好的:)

标签： css checkbox ionic-framework colors less

【解决方案1】：

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

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

在您的 <ion-checkbox> 中添加您自己的自定义类 custom-checkbox，然后为该类执行以下操作：

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

这将在选中时更改复选标记的颜色。

【讨论】：

我在哪里添加 border-color 在 .checkbox-icon:before 或 .checkbox-icon:after 或一个新类 @joshsisley
我刚刚编辑了上面的答案，提供了一个适合您的解决方案

【解决方案2】：

你可以用来改变<ion-checkbox>的颜色的一些css-属性是

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

您可以在ion-checkbox documentation找到更多信息

【讨论】：