DEV Community

Cover image for Checkbox Size CSS - [SOLVED]
CyberBotMachines
CyberBotMachines

Posted on • Updated on

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;
}
Enter fullscreen mode Exit fullscreen mode

And that's it.

And if you want to learn HTML, CSS and JS much faster check out this new learning method.

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 />
Enter fullscreen mode Exit fullscreen mode

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

Until next time,
Will

Discussion (0)