Check box size change with CSS

HtmlCssMobile

Html Problem Overview


How can I change check box sizes (globaly) without class and id? Is it possible to do this in a way different from:

input[type=checkbox] {
    zoom: 1.5;
}

Html Solutions


Solution 1 - Html

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/

Solution 2 - Html

You might want to do this.

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

Solution 3 - Html

Try this

<input type="checkbox" style="zoom:1.5;" />
/* The value 1.5 i.e., the size of checkbox will be increased by 0.5% */

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionKlapsiusView Question on Stackoverflow
Solution 1 - HtmlCharleshaaView Answer on Stackoverflow
Solution 2 - HtmlShreejibawaView Answer on Stackoverflow
Solution 3 - HtmlGenish ParvadiaView Answer on Stackoverflow