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

【问题标题】：html radio button same style in all browsershtml单选按钮在所有浏览器中的样式相同
【发布时间】：2013-01-23 13:39:49
【问题描述】：

如何在所有浏览器中获得相同样式的输入 type="radio"。我试图在页面上从左到右获取 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;
}

【问题讨论】：

抱歉，正如我所说，我正在使用垂直对齐并使用填充，但不幸的是我无法使用填充来产生任何真正的区别
是的，这很粗糙。如果它真的很重要，您可能需要考虑用您自己的自定义元素替换单选按钮，如 here 所述（以及许多其他地方）。
@showdev 我在尝试您的链接时收到 403 Forbidden。不幸的是，我只是想从 MVC 项目中设置其他人的代码样式，所以不确定是否可以将单选按钮更改为自定义元素

标签： css html radio-button

【解决方案1】：

正如达里奥在Radio/checkbox alignment in HTML/CSS 上指出的那样，试试这个：

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

另外，请记住，使用<label> 标记包装单选按钮标签是最佳做法。

见DEMO。

【讨论】：