你能把一个html单选按钮设计成一个复选框吗？

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

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

---

如果我不能做到这一点，我将不得不创建一个复选框来隐藏每个单选按钮，使用javascript保持复选框和单选按钮的同步，并使用css在适当的介质中显示我关心的那个。很明显，如果我可以对它们进行样式化，这将节省大量的工作。

我认为除了使用CSS的控件之外，您无法使控件看起来像任何其他控件

制作打印按钮的最佳选择是转到一个新页面，该页面上有一个图形来代替所选的单选按钮，然后从该页面执行window.PRINT（）。

在CSS3中：

input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}

实际上：

<span class=fakecheckbox><input type=radio><img src="checkbox.png" alt=""></span>

@media screen {.fakecheckbox img {display:none}}
@media print {.fakecheckbox input {display:none;}}

@媒体屏幕{.fakecheckbox img{display:none}
@媒体打印{.fakecheckbox输入{显示：无；}

而且您需要Javascript来保持

和收音机的同步（理想的情况是首先将它们插入其中）

---

我使用了

，因为浏览器通常配置为不打印

背景图像。使用图像比使用另一个控件更好，因为图像是非交互式的，不太可能引起问题。
在这个问题发布三年后，这几乎可以实现。事实上，在Firefox 1+、Chrome 1+、Safari 3+和Opera 15+中，使用
外观
属性完全可以实现这一点

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


input[type=“radio”]{
-webkit外观：复选框；/*Chrome、Safari、Opera*/
-moz外观：复选框；/*Firefox*/
-ms外观：复选框；/*当前不受支持*/
}
复选框1
复选框2
使用表而不使用Javascript是一个非常简单的想法。
我是不是太简单了

<style type="text/css" media="screen">
#ageBox {display: none;}
</style>

<style type="text/css" media="print">
#ageButton {display: none;}
</style>

<tr><td>Age:</td>

<td id="ageButton">
<input type="radio" name="userAge" value="18-24">18-24
<input type="radio" name="userAge" value="25-34">25-34

<td id="ageBox">
<input type="checkbox">18-24
<input type="checkbox">25-34

</td></tr>


#年龄框{显示：无；}
#年龄按钮{显示：无；}
年龄：
18-24
25-34
18-24
25-34
这是我的解决方案，只使用CSS（Jsfiddle:）



div.options>label>input{
可见性：隐藏；
}
div.options>标签{
显示：块；
边际：0-10px；
填充：0 20px 0；
高度：20px；
宽度：150px；
}
div.options>label>img{
显示：内联块；
填充：0px；
高度：30px；
宽度：30px；
背景：无；
}
div.options>label>input:checked+img{
背景：url(http://cdn1.iconfinder.com/data/icons/onebit/PNG/onebit_34.png);
背景重复：无重复；
背景位置：中心；
背景尺寸：30px 30px；
}

项目1
项目2
项目3
我调整了user2314737的答案以用于图标。对于那些不熟悉fa的人来说，与img相比的一个显著优势是字体固有的基于矢量的渲染。即，在任何缩放级别都不会出现图像锯齿


结果


div.checkRadioContainer>label>input{
可见性：隐藏；
}
分区检查无线电容器{
最大宽度：10em；
}
div.checkRadioContainer>标签{
显示：块；
边框：2倍纯色灰色；
边缘底部：-2px；
光标：指针；
}
div.checkRadioContainer>标签：悬停{
背景色：AliceBlue；
}
div.checkRadioContainer>label>span{
显示：内联块；
垂直对齐：顶部；
线高：2米；
}
div.checkRadioContainer>标签>输入+i{
可见性：隐藏；
颜色：绿色；
左边距：-0.5em；
右边距：0.2米；
}
div.checkRadioContainer>标签>输入：选中+i{
能见度：可见；
}

项目1
项目2
项目3
是的，CSS可以做到这一点：


输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]+*：在{
内容：“；
显示：内联块；
保证金：0.4em；
/*留出一些水平的空间*/
宽度：.6em；
高度：.6em；
边界半径：0.6em；
盒影：0px 0px 0px.5px#888
/*外圈*/
;
/*没有内圈*/
背景色：#ddd；
/*内部颜色*/
}
输入[类型=复选框]：选中+*：之前{
盒影：0px 0px 0px.5px#888
/*外圈*/
，插图0px 0px 0px.14em#ddd；
/*具有上述内颜色的内圈*/
背景色：#444；
/*点颜色*/
}

假支票箱1
假支票箱2
实复选框1
实支票箱2
外观属性不适用于所有浏览器。你可以这样做-


input[type=“radio”]{
显示：无；
}
标签：之前{
内容：网址(http://strawberrycambodia.com/book/admin/templates/default/images/icons/16x16/checkbox.gif);
}
输入[type=“radio”]：选中+标签：之前{
内容：网址(http://www.treatment-abroad.ru/img/admin/icons/16x16/checkbox.gif);
}

检查1
支票2
检查3所以我在堆栈上潜伏了这么多年。这实际上是我第一次在这里发帖

无论如何，这可能看起来很疯狂，但我在与同一问题作斗争时发现了这篇文章，并提出了一个肮脏的解决方案。我知道有更优雅的方法可以将其设置为属性值，但：

如果查看tcpdf.php中的第12880-12883行：

$fx = ((($w - $this->getAbsFontMeasure($tmpfont['cw'][`110`])) / 2) * $this->k);
$fy = (($w - ((($tmpfont['desc']['Ascent'] - $tmpfont['desc']['Descent']) * $this->FontSizePt / 1000) / $this->k)) * $this->k);
$popt['ap']['n'][$onvalue] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`110`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);
$popt['ap']['n']['Off'] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`111`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);

和第13135-13138行：

$fx = ((($w - $this->getAbsFontMeasure($tmpfont['cw'][`108`])) / 2) * $this->k);
$fy = (($w - ((($tmpfont['desc']['Ascent'] - $tmpfont['desc']['Descent']) * $this->FontSizePt / 1000) / $this->k)) * $this->k);
$popt['ap']['n']['Yes'] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`108`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);
$popt['ap']['n']['Off'] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`109`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);

input[type=radio] {
    -moz-appearance: none;
    -webkit-appearance: none;
    -o-appearance: none;
    outline: none;
    content: none;
    margin-left: 5px;
}

input[type=radio]:before {
    font-family: "FontAwesome";
    content: "\f00c";
    font-size: 25px;
    color: transparent !important;
    background: #fff;
    width: 25px;
    height: 25px;
    border: 2px solid black;
    margin-right: 5px;
}

input[type=radio]:checked:before {
    color: black !important;
}