更改离子复选框内的复选标记颜色

问题描述：

我正在改变离子复选框内复选标记的颜色。复选框有白色背景，复选标记为白色，以便勾选黑色而不是白色。这是我迄今为止更改离子复选框内的复选标记颜色

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

根据https://ionicframework.com/docs/api/components/checkbox/Checkbox/您在'.checkbox-inner'上更改'border-color' –

'.checkbox-inner'我必须添加此类到html或是它内置的离子复选框@MichaelCoker –

对不起，我不知道。我从未使用离子。如果你有一个工作演示，复选框呈现，我可以告诉你什么CSS改变。所以我去了离子网站看看他们是否有演示。我可以做的最好:) –

答

我敢肯定你确实有使用border-color调整对号颜色

所以在这里说明的是你可以做什么：

在您的<ion-checkbox>里面添加一个自定义类别custom-checkbox，然后为该类别做下面的操作：

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

这会在选中时改变复选标记的颜色。

我在哪里添加边框颜色.checkbox图标：之前或.checkbox图标：之后或新班级@joshsisley –

我刚刚编辑我的答案上面的解决方案，应该工作为你 – joshsisley

更改离子复选框内的复选标记颜色

相关推荐