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 speed up your coding career then check out my website for more info.

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.

Coding is stressful - personal story

I used to work as a programmer but I (physically) cannot do it anymore.

And it's all because of burnout.

If you are reading about checkbox sizes, I think it is safe to say that you're just starting out.

Please, do not work 12+ hours just because you (temporarily) can.

Worst thing that can happen is you build all this knowledge and your salary is sky high, companies are begging you to work for them...

...but you have to say no to all of that because you destroyed yourself in the process.

So don't let this happen to you - take care of your health and make sure you get enough rest.

And if you want to know more about dealing with stress check out can stress cause website and learn something new.

Until next time,
Will
(Former) Senior Software Developer

Discussion (0)