经过我好几个小时的试验、研究,终于出了成果……期间不断截图、放大400%、计算象素、出过好多套方案……终于做出了比较满意的效果,写成文如下:
单选、复选
单选框是个边长为12px的方框,复选框是个直径为12px的圆钮。我用表格将按钮和文本分隔两列。
单元格高(height)设为24px,偶数的素高便于文本在字体大小(font-size)和行高(line-height)为12px时垂直方向对称居中(上下各空6px)。虽然按钮不能对称居中,不过这也没办法,谁让windows指定了这么个象素高呢。按钮所在的单元格宽(width)可以设为奇数宽,我一般设为23px。
如果CSS控制里使用了*{margin:0px; padding:0px;}的话,Firefox浏览器中按钮有可能不居中,这时要在按钮所在单元格使用控制{text-align: center; vertical-align: middle;}。
如果需要,可在文本的<label>标签外嵌入<span>,然后用类控制器设置左边距(margin-left),值可根据实际情况设定,这里我设为5px。
文本框
文本框的宽和高可以通过CSS自定义。在单元格高(height)为24px、文本的字体大小(font-size)和行高(line-height)为12px时,我对文本框使用ID控制器{height: 15px; padding: 3px 0 0 2px;},这样在IE7和Firefox中文本框对于单元格垂直方向对称居中(上下各空1px)、文本框内的文本也垂直方向对称居中(上下各空4px)。
示例代码:
<html>
<head>
<title>表单</title>
<style type="text/css">
<!--
* {
font-family: "宋体";
font-size: 12px;
line-height: 12px;
margin: 0;
padding: 0;
}
td {
height: 24px;
text-align: center;
vertical-align: middle;
}
#user_name {
height: 15px;
width: 108px;
padding: 3px 0 0 2px;
}
.td {
text-align: left;
}
span {
margin-left: 5px;
}
-->
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="23" bgcolor="#FFCCCC"><input type="checkbox" name="checkbox1" id="checkbox1" /></td><td width="136" bgcolor="#CCFFCC" class="td" >
<span><label for="checkbox1">在此电脑上记住用户名</label></span></td>
</tr>
<tr>
<td bgcolor="#99CCFF"><input type="checkbox" name="checkbox2" id="checkbox2" /></td><td bgcolor="#FFFFCC" class="td">
<span><label for="checkbox2">SSL安全登录</label></span></td>
</tr>
<tr>
<td bgcolor="#FFCCCC"><input type="radio" name="RadioGroup" id="RadioGroup_0" /></td><td bgcolor="#CCFFCC" class="td">
<span><label for="RadioGroup_0">所有网页</label></span></td>
</tr>
<tr>
<td bgcolor="#99CCFF"><input type="radio" name="RadioGroup" id="RadioGroup_1" /></td><td bgcolor="#FFFFCC" class="td">
<span><label for="RadioGroup_1">中文网页</label></span></td>
</tr>
<tr bgcolor="#FFE9BB">
<td colspan="2"><label for="user_name">用户名</label>
<input type="text" name="user_name" id="user_name" maxlength="18" /></td>
</table>
</form>
</body>
</html>