Create CSS to Enlarge Checkboxes

Create CSS to enlarge checkboxes

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(http://ramyasspace.files.wordpress.com/2011/06/tick.jpg);
    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: Picol.org, cc-by 3.0, https://commons.wikimedia.org/wiki/File:Accept_Picol_icon.svg */  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M14 18L26 6l4 4-16 16L4 16l4-4z"/></svg>');  background-size: 100%;}

<label>  Click me:  <input type="checkbox" />  <span></span></label>

Checkboxes in web pages – how to make them bigger?

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.

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;}

<input type="checkbox" />

Check box size change with CSS

input fields can be styled as you wish. So instead of zoom, you could have

input[type="checkbox"]{
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
}

EDIT:

You would have to add extra rules like this:

input[type="checkbox"]{
  width: 30px; /*Desired width*/
  height: 30px; /*Desired height*/
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

Check this fiddle http://jsfiddle.net/p36tqqyq/1/

HTML/CSS: How to resize checkboxes (without overlapping)

hope this FIDDLE work for you

http://jsfiddle.net/rpku6d89/19/

HTML

<input  type="checkbox" name="optiona" id="opta" class="paddingClass" checked />
<span class="checkboxtext">
  Option A
</span>
<input type="checkbox" name="optionb" id="optb" class="paddingClass" />
<span class="checkboxtext">
  Option B
</span>
<input type="checkbox" name="optionc" id="optc" class="paddingClass"/>
<span class="checkboxtext">
  Option C
</span>

CSS

input[type=checkbox] {
      /* All browsers except webkit*/
      transform: scale(2);

      /* Webkit browsers*/
      -webkit-transform: scale(2);
    }

    .paddingClass{

        margin:20px;
        padding:5px;
    }

Increasing the size of checkbox in HTML

Not in an easy cross browser way.

You would get the most flexibility replacing it with a control that utilises JavaScript and CSS. Use a standard checkbox as a fallback.

These days, with the :checked pseudo selector, you can make a label element to do it as well.

HTML/CSS: how can I make the checkboxes grow when zooming in and shrink when zooming out?

jsFiddle DEMO

Use CSS3 to zoom the list as well as the browser rendered checkboxes!

.extraLarge ul {
  -moz-transform: scale(1.50);
  -webkit-transform: scale(1.50);
  -o-transform: scale(1.50);
  transform: scale(1.50);
  padding: 10px;
}

---

Related Topics