Skip to content

Instantly share code, notes, and snippets.

@denzildoyle
Last active August 29, 2015 14:15
Show Gist options
  • Save denzildoyle/cf26550ef5659387cee4 to your computer and use it in GitHub Desktop.
Save denzildoyle/cf26550ef5659387cee4 to your computer and use it in GitHub Desktop.

Change the size of a checkbox

/* Double-sized Checkboxes */
input[type=checkbox]{
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  padding: 10px;
}

Might want to wrap a span around your checkbox text

.checkboxtext{
  /* Checkbox text */
  font-size: 110%;
  display: inline;
}

Here is the HTML

<input  type="checkbox" name="optiona" id="opta" checked />
<span class="checkboxtext">Option A</span>

<input type="checkbox" name="optionb" id="optb" />
<span class="checkboxtext">Option B</span>

<input type="checkbox" name="optionc" id="optc" />
<span class="checkboxtext">Option C</span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment