htmlcssfirefox

I have an obscure border on my input in Firefox


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:
The first screenshot shows the Firefox browser

Inspector in Firefox:
Shown is the inspector in Firefox

The same element in Chrome:
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)