javascript - 你能设计一个 html 单选按钮看起来像一个复选框吗？

Question

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

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

如果我无法正常工作，我将不得不创建一个复选框来隐藏每个单选按钮，使用 javascript 使复选框和单选按钮保持同步，并使用 css 以适当的方式显示我关心的那个中等的。显然，如果我可以只为它们设置样式，那将节省大量工作。

Answer 1

这个问题发布三年后，这几乎触手可及。事实上，使用 CSS3 在 Firefox 1+、Chrome 1+、Safari 3+ 和 Opera 15+ 中完全可以实现。 外观属性。

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

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/

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