Chrome 上的单选按钮显示

【问题标题】：Radio button display on ChromeChrome 上的单选按钮显示
【发布时间】：2017-10-11 02:17:22
【问题描述】：

我将一个单选按钮设置为看起来像一个复选框，其中包含以下内容：

input[name="radio1"] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
-ms-appearance: checkbox;     /* not currently supported */
-o-appearance: checkbox;      /* not currently supported */

}

现在，当我在 Chrome 中访问该页面时，它会将它们填充为蓝色，如下所示：

blue box

任何想法如何解决？

【问题讨论】：

标签： html css button checkbox radio

【解决方案1】：

跨浏览器对这些元素进行样式设置是一种痛苦的经历。我会改为设置标签样式并隐藏默认输入。然后你可以使用普通的 CSS 为标签设置任何你想要的样式。

[type="radio"] {
  display: none;
}
[type="radio"] + label:before {
  content: '\2610';
  display: inline-block;
  font-size: 5em;
}
[type="radio"]:checked + label:before {
  content: '\2611';
}

<input type="radio" id="foo" name="radio">
<label for="foo"></label>
<input type="radio" id="foo2" name="radio">
<label for="foo2"></label>

【讨论】：