Change Ionic checkbox from circle to rectangle

1

Hi all.

My CSS skills aren’t top, and I need to change the shape of the Ionic checkbox from it’s default one: a circle, to a rectangle. How would I do that?

Thanks.

2

Just add:
class=“checkbox-square”

3

Sorry @flynnc it didn’t work. I even searched for the class checkbox-square in Ionic’s CSS files, but without a single match.

4

It works, you need to wrap the input tag inside the label and have to add this class to label tag like below

label class="checkbox checkbox-square
input type="checkbox"
label

I have removed the ‘<’ & ‘>’ tags from above code since it was not showing anything when I was adding this.

I am new to this community so I don’t know much about adding comment, sorry for any mistakes.
Thank you.

5 
myModule.config(function ($ionicConfigProvider) {
    $ionicConfigProvider.form.checkbox("circle");
});

This worked for me for the opposite situation and overrides the platform style set by ionic (it defaults to square on Android). I imagine changing “circle” to “square” would work for the OP’s use case.