Border generating on its own when checkbox is active

I used the appearance property on a checkbox which i am styling. Everything worked as expected , but there’s this annoying border showing up when the box is active – it has a outer black border on my PC, but, like, a yellow border on my phone.
I have used outline and border: none on it, but it’s not working.
Capture

Here’s is the link on Jsfiddle: https://jsfiddle.net/samolex/zdeL0o2w/2/

It’s the outline on :focus

[type="checkbox"]:focus {
  outline: none;
}
1 Like