Checkboxes in web pages how to make them bigger

Question

The standard checkboxes rendered in most browsers are quite small and don   t increase in size even when a larger font is used   What is the best  browser-independent way to display larger checkboxes

User · Answer

Actually there is a way to make them bigger, checkboxes just like anything else (even an iframe like a facebook button).

Wrap them in a "zoomed" element:

_x000D_

.double {_x000D_
  zoom: 2;_x000D_
  transform: scale(2);_x000D_
  -ms-transform: scale(2);_x000D_
  -webkit-transform: scale(2);_x000D_
  -o-transform: scale(2);_x000D_
  -moz-transform: scale(2);_x000D_
  transform-origin: 0 0;_x000D_
  -ms-transform-origin: 0 0;_x000D_
  -webkit-transform-origin: 0 0;_x000D_
  -o-transform-origin: 0 0;_x000D_
  -moz-transform-origin: 0 0;_x000D_
}

_x000D_

<div class="double">_x000D_
  <input type="checkbox" name="hello" value="1">_x000D_
</div>

_x000D_

It might look a little bit "rescaled" but it works.

Of course you can make that div float:left and put your label besides it, float:left too.

User · Answer

Pure modern 2020 CSS only decision  without blurry scaling or non-handy transforming  And with tick      Works nice in Firefox and Chromium-based browsers   So  you can rule your checkboxes purely ADAPTIVE  just by setting parent block s font-height and it will grow with text    x000D   x000D  input type  checkbox     x000D    -moz-appearance  none  x000D    -webkit-appearance  none  x000D    appearance  none  x000D    vertical-align  middle  x000D    outline  none  x000D    font-size  inherit  x000D    cursor  pointer  x000D    width  1 0em  x000D    height  1 0em  x000D    background  white  x000D    border-radius  0 25em  x000D    border  0 125em solid  555  x000D    position  relative  x000D    x000D   x000D  input type  checkbox   checked   x000D    background   adf  x000D    x000D   x000D  input type  checkbox   checked after   x000D    content       x000D    position  absolute  x000D    font-size  90   x000D    left  0 0625em  x000D    top  -0 25em  x000D    x000D   lt label for  check1  gt  lt input type  checkbox  id  check1  checked  checked    gt  checkbox one lt  label gt  x000D   lt label for  check2  gt  lt input type  checkbox  id  check2    gt  another checkbox lt  label gt  x000D   x000D   x000D

User · Answer

Try this CSS  input type checkbox   width 100px  height 100px

User · Answer

I m writtinga phonegap app  and checkboxes vary in size  look  etc  So I made my own simple checkbox   First the HTML code    lt span role  checkbox   gt    Then the CSS    role checkbox       background-image  url    img checkbox nc png       height  15px      width  15px      display  inline-block      margin  0 5px 0 5px      cursor  pointer      checked role checkbox       background-image  url    img checkbox c png       To toggle checkbox state  I used JQuery   CLICKEVENT  touchend   function createCheckboxes             role checkbox    bind CLICKEVENT function                   this  toggleClass  checked                But It can easily be done without it     Hope it can help

User · Answer

Here s a trick that works in most recent browsers  IE9   as a CSS only solution that can be improved with javascript to support IE8 and below    lt div gt     lt input type  checkbox  id  checkboxID  name  checkboxName  value  whatever    gt     lt label for  checkboxID  gt   lt  label gt   lt  div gt    Style the label with what you want the checkbox to look like   checkboxID     position  absolute fixed    margin-right  2000px    right  100      checkboxID   label        unchecked state       checkboxID checked   label        checked state       For javascript  you ll be able to add classes to the label to show the state  Also  it would be wise to use the following function      label for    live  click   function e               this  attr  for     click      return false        EDIT to modify  checkboxID styles

User · Answer

In case this can help anyone  here s simple CSS as a jumping off point  Turns it into a basic rounded square big enough for thumbs with a toggled background color    x000D   x000D  input type  checkbox     x000D      -webkit-appearance none  x000D      width 30px  x000D      height 30px  x000D      background white  x000D      border-radius 5px  x000D      border 2px solid  555  x000D    x000D  input type  checkbox   checked   x000D      background   abd  x000D    x000D   lt input type  checkbox    gt  x000D   x000D   x000D

User · Answer

I tried changing the padding and margin and well as the width and height  and then finally found that if you just increase the scale it ll work   input type checkbox        transform  scale 1 5

[html] Checkboxes in web pages – how to make them bigger?

Examples related to html

Examples related to css

Examples related to checkbox