How to make checkboxes in web pages bigger with CSS?

Spread the love

Sometimes, we want to make checkboxes in web pages bigger with CSS.

In this article, we’ll look at how to make checkboxes in web pages bigger with CSS.

How to make checkboxes in web pages bigger with CSS?

To make checkboxes in web pages bigger with CSS, we set its width and height.

For instance, we write

<input type="checkbox" />

to add a checkbox.

Then we write

input[type="checkbox"] {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  background: white;
  border-radius: 5px;
  border: 2px solid #555;
}

input[type="checkbox"]:checked {
  background: #abd;
}

to set the width and height of the checkbox to make it bigger.

Conclusion

To make checkboxes in web pages bigger with CSS, we set its width and height.

Leave a Reply

Your email address will not be published.