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.

Here’s is the link on Jsfiddle:

It’s the outline on :focus

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