Can I change the checkbox size using CSS?

by

It’s a little ugly (due to the scaling up), but it works on most newer browsers:

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

/* Might want to wrap a span around your checkbox text */
.checkboxtext
{
  /* Checkbox text */
  font-size: 110%;
  display: inline;
}
<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>

More Related Contents:

  1. Can I debug by CSS code in easy way for beginner?
  2. Setting columns in bootstrap grid
  3. How to write a:hover in inline CSS?
  4. Landscape printing from HTML
  5. Change color of PNG image via CSS?
  6. Use images instead of radio buttons
  7. Positions fixed doesn’t work when using -webkit-transform
  8. CSS :selected pseudo class similar to :checked, but for elements
  9. How to choose between `class` and `id`
  10. Get second line of bullet item to indent as first part – not underneath the bullet?
  11. How to get an IFrame to be responsive in iOS Safari?
  12. How can I make my flexbox layout take 100% vertical space?
  13. How to make HTML Text unselectable [duplicate]
  14. How to change one element while hovering over another
  15. Is it possible to have several different textcolors in one textarea?
  16. heading with horizontal line on either side [duplicate]
  17. CSS Background image not loading
  18. add title attribute from css
  19. How to add background image for input type=”button”?
  20. How to indent multiple levels of select optgroup with CSS?
  21. How to specify parameters to google chrome adobe pdf viewer?
  22. How to rotate and postion an element on the top left or top right corner?
  23. Make fill entire screen?
  24. Remove host component tag from html in angular 4
  25. How to load CSS Asynchronously
  26. Bootstrap full-width text-input within inline-form
  27. Can you style html form buttons with css?
  28. Internet Explorer and clip-path
  29. Pseudo class :hover does not work in IE7
  30. How to center and crop an image to always appear in square shape with CSS?

Leave a Comment