更改離子複選框內的複選標記顏色

我正在改變離子複選框內複選標記的顏色。複選框有白色背景，複選標記爲白色，以便勾選黑色而不是白色。這是我迄今爲止更改離子複選框內的複選標記顏色

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

來源

2017-06-19 David Ramirez

根據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 
}

這會在選中時改變複選標記的顏色。

來源

2017-06-19 21:52:02 joshsisley

我在哪裏添加邊框顏色.checkbox圖標：之前或.checkbox圖標：之後或新班級@joshsisley –

我剛剛編輯我的答案上面的解決方案，應該工作爲你 – joshsisley

更改離子複選框內的複選標記顏色

回答

相關問題