14

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?

Avadhani Y
  • 7,276
  • 18
  • 55
  • 90
Pavan Kumar
  • 1,526
  • 4
  • 23
  • 37
  • 1
    Question asked many times. Take a look at: http://stackoverflow.com/questions/7213728/how-can-i-make-a-checkbox-bigger http://stackoverflow.com/questions/306924/checkbox-size – megatxi Feb 16 '13 at 11:11
  • 1
    @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 – abbood Feb 16 '13 at 12:28
  • old page, but: I'd recommend the usage of "label for=checkbox-id", which should extend the useability (checkbox is also checked/unchecked when you click/tap the label text) – Gunnar Jul 12 '17 at 15:08

4 Answers4

19

try:

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

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

Martin Köll
  • 305
  • 2
  • 5
  • 1
    It is not cross browser supported. – Revolution88 Mar 10 '14 at 18:42
  • 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. – Jon z Mar 12 '15 at 16:17
  • Works in Chrome now (few years later) – Jonathan Dec 28 '18 at 11:05
1
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

Kumar
  • 345
  • 2
  • 3
  • 15
1
input[type=checkbox] {
  /* All browsers except webkit*/
  transform: scale(2);
  /* Webkit browsers*/
  -webkit-transform: scale(2);
}
m4rtijn
  • 11
  • 1
0

Or you can try it using uniform or jQuery Mobile.

megatxi
  • 401
  • 4
  • 16