boy boy - 2 years ago 136
CSS Question

Create CSS to enlarge checkboxes

I am trying to double the size of my checkboxes on a few pages. How do I make that happen in CSS? I don't want to style the hover.


Answer Source

You could always use the checkbox hack to make your own checkbox. This allows for a much more cross browser compatible solution.

I made a quick demo here, obviously you would have to get a transparent .png of a tick, not the one I got.

input[type=checkbox]:checked ~ div label{
    background: url(;
    background-size: 100%;

input {
  display: none;

label input[type=checkbox] ~ span {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  background: #fff;
  border: 1px solid #888;
  padding: 1px;
  height: 20px;
  width: 20px;

label input[type=checkbox]:checked ~ span {
  /* image:, cc-by 3.0, */
  background: url('data:image/svg+xml;utf8,<svg xmlns="" width="32" height="32" viewBox="0 0 32 32"><path d="M14 18L26 6l4 4-16 16L4 16l4-4z"/></svg>');
  background-size: 100%;
  Click me:
  <input type="checkbox" />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download