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