Change unselected border color of checkbox


I have been struggling with this for over a day now, and I am no closer to a solution. I know that this problem sounds quite stupid, for it should be really easy to solve, but no matter which CSS-variable I try to override, nothing happens. I have tried to override --border-color, --ion-border-color, and even the .checkbox-icon-class itself, but nothing works. Not even !important.
As most of you must already know, the Ionic apps have a light theme by default. Since I did not like that, I changed it to a darker color, but now my problem is, that the border of an unchecked checkbox is black. And of course, dark upon dark has not really the best contrast.

In order to show you what exactly my problem is, I have uploaded a screenshot of those checkboxes here.

I really hope that anyone can finally release me from this CSS-pain.

Yours sincerely,
Philipp R.

1 Like