Black checkboxes on IOS browsers

Issue

I’m having trouble fixing one issue with checkbox on IOS browsers. I always get a black check icon with a black square around it (picture). This only happens on IOS browsers.

I’m using

 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none; 

Any ideas?
Anyone had the same problem?

Solution

I tried several ways to fix it, but in the end I tried one simple thing and it worked… I change the SVG that I was using. Just added white background on the SVG image and it worked!

Thanks for the help anyways 🙂

Answered By – Mariana Alfafar

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0