Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Check box size change with CSS [duplicate]

Tags:

html

css

mobile

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; } 
like image 251
Klapsius Avatar asked Aug 28 '14 13:08

Klapsius


People also ask

How do I change the size of a checkbox in CSS?

Method 1: The checkbox size can be set by using height and width property. The height property sets the height of checkbox and width property sets the width of the checkbox.

How do you enlarge a check box?

Right-click the selection, and then click Format Control. On the Size tab, enter measurements for the height and width of the control, or click the up or down arrow keys to move the height and width.

How do you change the shape of a check box?

To change size, color, or border style of the check box, select the Use a style to format text typed into the empty control box, and then click New Style. Under Formatting, select a font size for the check box. In the Color list, select a color. To select a different border, select Format > Border.


1 Answers

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/

like image 54
Charleshaa Avatar answered Sep 19 '22 03:09

Charleshaa