Geeks With Blogs
expression{web.blog} Thoughts on Expression Web and web tools in general

Have you ever had trouble selecting a radio button or checkbox on your mobile phone?

Two aspects of web forms that often get overlooked for mobile page views are the ‘tap size’ of radio buttons and checkboxes, and the spacing between these elements. The first dictates the target area you have to tap and the second can mean you select the wrong option by mistake. Fortunately both are easy to solve.

The tap size can be increased by changing the width and height for these elements in your mobile breakpoint:

input[type=radio], input[type=checkbox]
{
width:40px;
height:40px;
}

Then just make sure spacing between radio buttons and checkboxes is sufficient to avoid selecting the wrong one.

If you have labels associated with the radio/checkbox elements (which you should) make sure the additional spacing includes these.

Assuming the above style is in the ‘mobile first’ part of your media queries you’ll need to reset the width and height to ‘auto’ for other view sizes.

Posted on Wednesday, April 16, 2014 7:50 PM | Back to top


Comments on this post: ‘Tap size’ for radio buttons and checkboxes on mobile devices

# re: ‘Tap size’ for radio buttons and checkboxes on mobile devices
Requesting Gravatar...
Thanks for the tips, it works
Left by Ang on Sep 14, 2014 9:33 PM

# re: ‘Tap size’ for radio buttons and checkboxes on mobile devices
Requesting Gravatar...
Very nice detail about to design a buttion ofr mobile devices. What Mobile Price
Left by nasir Azeem on Jul 31, 2015 7:17 PM

# re: ‘Tap size’ for radio buttons and checkboxes on mobile devices
Requesting Gravatar...
23 Software mxf converter free download to convert HD camcorder files. convert avchd video files to avi,
mp4, wmv, mov mts to avi mp4 mov mkv iMovie mts converter 23
Left by googl on Dec 10, 2016 3:20 PM

# re: ‘Tap size’ for radio buttons and checkboxes on mobile devices
Requesting Gravatar...
USE a select box instead
Left by Jeremy Freedman on Feb 17, 2017 12:15 PM

Your comment:
 (will show your gravatar)


Copyright © ihaynes | Powered by: GeeksWithBlogs.net