html单选按钮在所有浏览器中都是相同的样式

时间:2013-02-07 21:44:22

标签: html css html5 radio-button

如何在所有浏览器中获得相同样式的输入类型=“无线电”。我试图在页面上从左到右获得3个单选按钮,单选按钮和文本使用css在所有IE9,Chrome和FF中居中。我正在使用所有不同类型或垂直对齐和填充,它们可以在某些浏览器上运行但不是全部。

<input class="text-bottom" type="radio" value="1"  name="ProcessingComplete">Works in FF & Chrome
<input class="middle" type="radio" value="1"  name="ProcessingComplete">Works in IE
<input class="top" type="radio" value="1"  name="ProcessingComplete">Works in FF & Chrome

.middle
{
vertical-align: middle;
}
.top
{
vertical-align: top;
}
.text-bottom
{
vertical-align:text-bottom;
}

1 个答案:

答案 0 :(得分:1)

正如Dario在Radio/checkbox alignment in HTML/CSS上指出的那样,试试这个:

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}

另外,请注意,最好使用<label>标记包装单选按钮标签。

请参阅DEMO