-1

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
rja
  • 145
  • 7
  • 2
    Does this answer your question? [Can I change the checkbox size using CSS?](https://stackoverflow.com/questions/306924/can-i-change-the-checkbox-size-using-css) – 95faf8e76605e973 Aug 24 '20 at 07:29
  • I have problem with the size of the content not with the size of checkbox. – rja Aug 24 '20 at 07:36

1 Answers1

0

Browsers react very differently,

In Chrome broswer it shows perfectly,

enter image description here

But in Firefox 57 shows,

enter image description here

More info : Visit styling checkbox in different browser

Rayees AC
  • 4,008
  • 3
  • 6
  • 27