How to style/size the ion-checkbox checkmark by overriding Sass variables?

Ionic Framework ionic-v3
1

I’m trying to style the control to have display a larger checkbox, but unfortunately haven’t managed to resize the checkmark itself to match the new box size.
There appears to be Ionic Sass variables to style just about everything on a ion-checkbox except for the size & position of the checkmark itself. The default checkmark behavior also seems odd as the checkmark isn’t centered in the checkbox, but remains top left aligned, which isn’t what I’m looking for.

This is my Html:
<ion-item> <ion-label>This is my checkbox.</ion-label> <ion-checkbox checked="true"></ion-checkbox> </ion-item>

These are the Ionic Sass variables that I have set in my app.variable.scss
$checkbox-md-icon-background-color-on: #fff;
$checkbox-md-icon-border-color-on: #00ff00;
$checkbox-md-icon-border-color-off: #cecece;
$checkbox-md-icon-checkmark-color: #ff0000;
$checkbox-md-icon-checkmark-width: 2px;
$checkbox-md-icon-size: 40px;
$checkbox-md-icon-border-radius: 0%;
$checkbox-md-icon-border-width: 1px;

This is the result that I am seeing:

image

Is there a way to create the larger checkbox while still keeping the checkmark itself centered inside the checkbox?
Ideally, I’d also like to resize the checkmark to make it larger too.

If it is not currently possible to restyle the checkmark in an ion-checkbox by overriding the Sass variables, what is the easiest way to restyle an ion-checkbox to get a larger box and centered checkmark?

Thanks

1 Like
2

I wasn’t able to get anything working by only overriding the Ionic Sass variables. Although it seems like it should be possible as there is a $checkbox-md-icon-checkmark-style variable.

In the end I solved the issue by modifying the position of the checkmark using the following code in my app.core.scss file:
.checkbox-checked .checkbox-inner { position: absolute; top 9px; left: 13px; height: 11px; width: 5 px; }

3 Likes