How to increase checkbox size in mobile or tablet browser based web pages?

Question

I have designed a web page for mobile/tablet. when i open it in mobile/tablet browsers the checkbox are looks small and difficult identify whether it is checked or not. I have tried with css. but no use.

How can we increase size of checkbox for mobile/tablet browser web pages? else is there any solution for that?

Solution 1

try:

<input type="checkbox" style="min-height:80px;min-width:80px;">

the "min-" statement is your friend ;-)

Solution 2

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

Solution 3

input[type=checkbox]:checked {
   background: url("data:image/png,%89PNG[...]") no-repeat center center;
   -webkit-background-size: 28px 28px; /* shrink high resolution background */
 }

check this link http://37signals.com/svn/posts/2609-customizing-web-forms-with-css3-and-webkit

Comments

[alcoceba]

Question asked many times. Take a look at: stackoverflow.com/questions/7213728/… stackoverflow.com/questions/306924/checkbox-size

[abbood]

@sparkling there is a difference between having cross-browser discrepancies on the same screen (ie IE vs Chrome on PC) and between having discrepancies between devices with different resolutions (ie PC screen vs iPhone retina display).. your posts address the former.. Paven's address the latter

[Revolution88]

It is not cross browser supported.

[Jon z]

Yeah, not sure where it does work, but it doesn't work in Chrome at least. I feel like browsers should allow this - simple size changes to fit the layout of the site seem like a pretty common need - it shouldn't be necessary to define a whole custom input framework just to change the size.

[Jonathan]

Works in Chrome now (few years later)