I have an obscure border on my input in Firefox

Issue

I want to make the input element completely devoid of border, I removed the border, made its length 0, removed the outline, but still Firefox shows a border of 2px on each side. Why can this happen? I use Firefox Develop Edition.

Here are screenshots describing the situation:

The first screenshot shows the Firefox browser:

Inspector in Firefox:

The same element in Chrome:

This is code on the screenshots applied to .quest__form-default

.quest__form-default {
      display: block;
      position: absolute;
      top: 20px;
      width: 1px;
      height: 1px;
      clip: rect(0, 0, 0, 0);
      overflow: hidden;
      border: 0;
      outline: 0;
      border-width: 0px;
    }

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Solution

You can try using these appearance properties on the checkbox:

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

Otherwise, your best bet is to just match the border color to the background color of the parent element (not the best way)

Answered By - jejemalani