1

The question is: How to remove that border in FireFox? enter image description here

When running at Google Chrome it is OK enter image description here 

input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: borer-box;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

input[type="checkbox"] {
  background: url(//i.imgur.com/qBOXbpe.png) left top no-repeat;
}

input[type="radio"] {
  background: url(//i.imgur.com/qBOXbpe.png) -30px top no-repeat
}

input[type="checkbox"]:checked {
  background: url(//i.imgur.com/qBOXbpe.png) -15px top no-repeat;
}

input[type="radio"]:checked {
  background: url(//i.imgur.com/qBOXbpe.png) -45px top no-repeat;
}

input[type="checkbox"]:focus {
  outline:none;
}
<input type="checkbox" />
breq
  • 24,412
  • 26
  • 65
  • 106
  • FF is quite difficult about checkboxes. Check out this: http://stackoverflow.com/questions/11552228/firefox-remove-border-from-undecorated-checkbox – Szymon Jankowski Dec 30 '16 at 19:04
  • [At least four similar questions on Stack.](https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=css%20firefox%20checkbox%20border) – Michael Benjamin Dec 30 '16 at 19:04
  • @Michael_B please note that I have different html structure. In my code there is only input witout label. – breq Dec 30 '16 at 19:12
  • 1
    @breq If you want to style checkbox, don't use it directly. each browser deal with it differently. here you can see a way for changing checkbox style: https://webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons--webdesign-8953 – ICE Dec 30 '16 at 20:04

0 Answers0