Forum Moderators: open
I would like to change the size of an input type radio to make it smaller and I would like to reduce the vertical space between these radios in a table. It´s possible?
Here is the code I´m implementing
Thanks a lot
<html>
<head>
<title>Options</title>
</head>
<body>
<table width="135" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="10" style="vertical-align:middle;" align="left">
<input type="radio" name="optionID" value="1"/>
</td>
<td width="125" style="vertical-align:middle;" align="left">
<font style="font-family:Trebuchet MS, Arial, Helvetica, sans-serif; font-size:9px;">Option 1</font>
</td>
</tr>
<tr>
<td width="10" style="vertical-align:middle;" align="left">
<input type="radio" name="optionID" value="2"/>
</td>
<td width="125" style="vertical-align:middle;" align="left">
<font style="font-family:Trebuchet MS, Arial, Helvetica, sans-serif; font-size:9px;">Option 2</font>
</td>
</tr>
</table>
</body>
I think you are out of luck on both counts here.
As far as I am aware, there is no way to resize the actual radio button. Also, the only way I can figure to move the radios closer together verically is to put a negative margin on the bottom of the top one, however this has unpredictable and inconsistant effect across different browsers.
Also, from a usability perspective, I don't think it would be a good thing to make the radio buttons any smaller than they are by default. When using an interface, there is a factor called "targeting" which is all about how small an area is active for a given function. The smaller the target area, the more challenging it can be for different devices, and for people with different physical abilities and challenges.
This is one reason why labels are valuable for small form inputs like radio buttons.
So if you ever uncover a way to make radio buttons visually smaller, I strongly advise you to create text labels so that the targeting can be a bit more expansive for the user.
My own personal feeling is that today's designers like "small" everything much too often, both online and in print. This "small is better" approach allows aesthetic sensibilities to overrule what is practical and highly functional.
In every area of design (even physical world design) it's the integration of aesthetics and functionality that is the sign of top notch design work.
Louis Sullivan coined the saying:
"Form follows function."
And his student, Frank Lloyd Wright said:
"Form and function should be one, joined in a spiritual union."
