您可以将 html 单选按钮设置为看起来像复选框吗？

Question

我有一个用户将填写并打印的 html 表单。打印后，这些表格将被传真或邮寄给政府机构，并且需要看起来与该机构发布的原始表格足够接近，以使政府官员不会发现这是复制品。在表单中输入的数据不会保存在任何地方，甚至不会提交回 Web 服务器。重要的是我们的用户可以在我们的 Intranet 站点上轻松找到这些表格，并使用他们的普通键盘输入表格进行打印。

在屏幕上，我想保留单选按钮，以强制和传达单选按钮的使用（仅选择一个选项）。但是，当它打印出来时，我需要它以方形复选框样式而不是圆形单选按钮样式打印。我知道如何使用媒体选择器来设置仅用于打印的样式，所以这不是问题。只是我不知道我是否可以像我想要的那样设置单选按钮的样式。

如果我不能让这个工作，我将不得不创建一个复选框来隐藏每个单选按钮，使用 javascript 来保持复选框和单选按钮同步，并使用 css 在适当的媒体中显示我关心的那个。显然，如果我可以为它们设计样式，它将节省大量工作。

原文由 Joel Coehoorn 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个问题发布三年后，这几乎是触手可及的。事实上，在 Firefox 1+、Chrome 1+、Safari 3+ 和 Opera 15+ 中完全可以使用CSS3 appearance 财产。

结果是看起来像复选框的单选元素：

 input[type="radio"] {
  -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
  -moz-appearance: checkbox;    /* Firefox */
  -ms-appearance: checkbox;     /* not currently supported */
}

 <label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>

jsfiddle: http://jsfiddle.net/mq8Zq/

注意： 由于缺乏供应商的支持和一致性，这最终从 CSS3 规范中删除。我建议不要实施它，除非您只需要支持基于 Webkit 或 Gecko 的浏览器。

原文由 Andy E 发布，翻译遵循 CC BY-SA 3.0 许可协议