CODEWITHSUNDEEP
csscheckboxcolorsionic-framework
Ville Miekk-oja
Ville Miekk-oja

Reputation: 20935

Customize ion-checkbox default background-color

ion-checkboxes are great, but I don't know how I could customize the background-color of the checkbox to be something other than the default white? I know how to customize the checkbox color that is shown when the checkbox is checked, but not the unchecked color.

Upvotes: 4

Views: 13137

Answers (3)

David Prieto
David Prieto

Reputation: 2299

I did it like this:

.checkbox input:checked:before, .checkbox input:checked + .checkbox-icon:before {
  background: red !important; 
  border-color: red !important;
}

Upvotes: 4

Frisone
Frisone

Reputation: 11

Use ionic colors, for example:

<li class="item item-checkbox my-checkbox-class">
 <label class="checkbox checkbox-balanced">
   <input type="checkbox">
 </label>
 Flux Capacitor
</li>

Upvotes: 1

Vinko Bradvica
Vinko Bradvica

Reputation: 466

You should add an override css style for checkbox class:

.ionic .checkbox input:before, 
.ionic .checkbox-icon:before {
  background: #333;    /* use your color hex instead of #333 */
  border-color: #333;
}

and for active state:

.ionic .checkbox input:checked:before, 
.ionic .checkbox input:checked + .checkbox-icon:before {
  background: #333;
}

I would recomend adding a parent theme class so you don't change the color of ther checkboxes:

.ionic .my-checkbox-class .checkbox input:before, 
.ionic .my-checkbox-class .checkbox-icon:before

.ionic .my-checkbox-class .checkbox input:checked:before, 
.ionic .my-checkbox-class .checkbox input:checked + .checkbox-icon:before {

and use it like this:

<li class="item item-checkbox my-checkbox-class">
 <label class="checkbox">
   <input type="checkbox">
 </label>
 Flux Capacitor
</li>

Upvotes: 2

Related Questions