Chrome上的单选按钮显示

Question

我设置了一个单选按钮，看起来像一个带有以下内容的复选框：

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

}

现在，当我在Chrome中访问该页面时，它会用蓝色填充它们：

blue box

任何想法如何解决？

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;