Ionic Checkbox styling

Need help Plugins
1

I am using the Ionic check box, but it looks just like a regular check box (a square) just without the label.
What do i miss???
Please, help…

2

I bet you are using Firefox as a browser? I think it looks cooler in Chrome.

3

You are the master!!! thanks, in chrome it will be rounded and colorful?
I can’t check it in chrome now…

4

Well I’m not 100% sure, but I think I tested that some time ago. I made an app in Chrome with that checkmark thing, and went to test the app in firefox and it looked like "#$%! :-/

5

I’ll check that in chrome,
Thank you!!!

6

Chrome:

05

Firefox:

34

Too bad it is like this really :frowning:

7

I don’t see it even i color… just as regular check box very grayyyyy

8

Hi,

I suggest if you want a consistent looking checkbox the best bet is to use a custom image with conditions for the checked version.

1 Like
9

When you want to style a checkbox , you need to apply any Ionic color class with the checkbox prefix.

I suggest you to first check chrome browser and if everything works fine there then and then go for cross-browsers compatiblilty.

<ion-list>

  <ion-item>
    <ion-label>Pepperoni</ion-label>
    <ion-checkbox [(ngModel)]="pepperoni"></ion-checkbox>
  </ion-item>

  <ion-item>
    <ion-label>Sausage</ion-label>
    <ion-checkbox [(ngModel)]="sausage" disabled="true"></ion-checkbox>
  </ion-item>

  <ion-item>
    <ion-label>Mushrooms</ion-label>
    <ion-checkbox [(ngModel)]="mushrooms"></ion-checkbox>
  </ion-item>

</ion-list>

We used ngModel directive that creates a FormControl instance from a domain model and binds it to form control element.
Here, checked is a booleanproperty and If true, the element is selected.