Checkbox Size CSS - [SOLVED]

TL;DR Summary

When changing the checkbox size in CSS there are two things you need to do:

1) setting width and height on the input element

But when you change the checkbox size then you have a problem because it looks out of place.

2) The way to fix it is with top property along with position: relative;. This is the key to positioning it properly.

#big-input {
  width: 20px;
  height: 20px;
  top: 4px;
  position: relative;
}

And that's it.

More details

If you want the full code for the screenshot example on the top, here is the code that was used:

<style>
  body { 
    background-color: aquamarine; 
    padding: 300px;
    text-align: center;
  }
  #big-input {
    width: 20px;
    height: 20px;
    top: 4px;
    position: relative;
  }
  #small-input {
    width: 8px;
    height: 8px;
    top: -2px;
    position: relative;
  }
</style>

<input type="checkbox" id="big-input" />
  <label>Big checkbox........</label>
  <br /><br />
<input type="checkbox" id="normal" />
  <label>Normal checkbox</label>
  <br /><br />
<input type="checkbox" id="small-input" />
  <label>Small checkbox..</label>
  <br /><br />

And that's all there is to setting checkbox size with CSS.

Until next time,
Will
Senior Developer & SEO Algo Specialist