Checkbox (input) height and width changing for mobile screen sizes?

Question

I have the following code:

<div class="container-fluid mt-5">
  <div class="row">
    <div class="col-10">
      Hello
      <br>
      Hello
    </div>
    <div class="col-2">
        <input type="checkbox" class="w-100 h-100">
    </div>

  </div>
</div>

JS fiddle

This is what the checkbox looks like on desktop displays:

And this is what the checkbox looks like on mobile displays:

I don't understand why the size of the checkbox is changing for desktop displays. Should it not have the same height/width for both mobile and desktop since I am specifically setting its size using h-100 and w-100?

Maybe this will help ypu. See examples https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms — A. Meshu, Jun 02 '18 at 11:38

score 0 · Answer 1 · answered Jun 02 '18 at 12:44

The class = 'w-100 h-100' force them to use 100% of width and height. If you do not need this, try to set the width and height instead of using this classes.

Look the classes:

.h-100 {
    height: 100%!important;
}
.w-100 {
    width: 100%!important;
}

score 0 · Answer 2 · answered Jun 02 '18 at 12:45

There are a few problems.

The checkbox is inside a col-2 which is getting narrower in width. Both height:100% and width:100% are relative to the size of the parent container (col-2). Also, height:100% only works when the parent has a defined height as explained here and in several other answers.

Also, the col-2 has padding which impacts the size of the input.

Checkbox (input) height and width changing for mobile screen sizes?

2 Answers2