Increasing the height of the content in firefox

Question

I have a checkbox in my angular app. when the value is checked, the box is filled with the value in google-chrome. in firefox it is displaying only on top corner instead of filling the input field. How can i resolve this. please guide me.

HTML

<input class="customInput" id="custom" type="checkbox" formControlName="test" readonly>

css

.customInput {
  width: 100%;
  min-height: 70px;
  border: none !important;
  text-align: center;
  font-size: 50px;
  background: transparent;
}

// fully checked in chrome

// uncompatable firefox

Answer 1

Browsers react very differently,

In Chrome broswer it shows perfectly,

But in Firefox 57 shows,

More info : Visit styling checkbox in different browser