![Cover image for Checkbox Size CSS - [SOLVED]](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fj8gnl9wue0rkvu78cr4u.png)
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
P.S. check out my Algo-Trading Journey articles
Top comments (0)