您可以将 html 单选按钮的样式设置为看起来像复选框吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/279421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you style an html radio button to look like a checkbox?
提问by Joel Coehoorn
I have an html form that a user will fill out and print. Once printed, these forms will be faxed or mailed to a government agency, and need to look close enough like the original form published by said agency that a government bureaucrat doesn't spot that this is a reproduction. The data entered in the form is not saved anywhere or even submitted back to a web server. All that matters is that our users can easily find these forms on our intranet site and type into the form for printing with their normal keyboard.
我有一个用户将填写和打印的 html 表单。一旦打印，这些表格将被传真或邮寄给政府机构，并且需要看起来足够接近该机构发布的原始表格，政府官僚不会发现这是复制品。表单中输入的数据不会保存在任何地方，甚至不会提交回 Web 服务器。重要的是，我们的用户可以轻松地在我们的内部网站上找到这些表格，并使用他们的普通键盘输入表格进行打印。
On the screen I want to leave the radio button as-is, to enforce and communicate radio button usage (choose only one option). However, when it prints out I need it to print with the square checkbox style rather than the round radio button style. I know how to use a media selector to set styles for print only, so that's not the issue. It's just that I don't know if I can style the radio button like I want at all.
在屏幕上，我想保留单选按钮原样，以强制执行和传达单选按钮的使用（仅选择一个选项）。但是，当它打印出来时，我需要它以方形复选框样式而不是圆形单选按钮样式打印。我知道如何使用媒体选择器来设置仅用于打印的样式，所以这不是问题。只是我不知道我是否可以像我想要的那样设置单选按钮的样式。
If I can't get this working I'm gonna have to create a checkbox to shadow each radio button, use javascript to keep the checkboxes and radio buttons in sync, and css to show the one I care about in the proper medium. Obviously if I can just style them it would save a lot of work.
如果我不能让它工作，我将不得不创建一个复选框来隐藏每个单选按钮，使用 javascript 保持复选框和单选按钮同步，并使用 css 以适当的媒介显示我关心的那个。显然，如果我可以为它们设计样式，那将节省大量工作。
回答by Andy E
Three years after this question is posted and this is almost within reach. In fact, it's completely achievable in Firefox 1+, Chrome 1+, Safari 3+ and Opera 15+ using the CSS3appearanceproperty.
在这个问题发布三年后，这几乎是触手可及的。事实上，它完全可以在 Firefox 1+、Chrome 1+、Safari 3+ 和 Opera 15+ 中使用CSS3appearance财产。
The result is radio elements that look like checkboxes:
结果是看起来像复选框的单选元素：
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>Note:this was eventually dropped from the CSS3 specification due to a lack of support and conformance from vendors. I'd recommend against implementing it unless you only need to support Webkit or Gecko based browsers.
注意：由于缺乏供应商的支持和一致性，这最终从 CSS3 规范中删除。我建议不要实施它，除非您只需要支持基于 Webkit 或 Gecko 的浏览器。
回答by Kornel
In CSS3:
在 CSS3 中：
input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}
In reality:
事实上：
<span class=fakecheckbox><input type=radio><img src="checkbox.png" alt=""></span>
@media screen {.fakecheckbox img {display:none}}
@media print {.fakecheckbox input {display:none;}}
and you'll need Javascript to keep <img>and radios in sync (and ideally insert them there in a first place).
并且您将需要 Javascript 来保持<img>和无线电同步（并且理想情况下首先将它们插入那里）。
I've used <img>, because browsers are usually configured not to print background-image. It's better to use image than another control, because image is non-interactive and less likely to cause problems.
我使用过<img>，因为浏览器通常配置为不打印background-image。使用图像比使用其他控件更好，因为图像是非交互式的并且不太可能引起问题。
回答by user2314737
This is my solution using only CSS (Jsfiddle: http://jsfiddle.net/xykPT/).
这是我仅使用 CSS 的解决方案（Jsfiddle：http: //jsfiddle.net/xykPT/）。
div.options > label > input {
visibility: hidden;
}
div.options > label {
display: block;
margin: 0 0 0 -10px;
padding: 0 0 20px 0;
height: 20px;
width: 150px;
}
div.options > label > img {
display: inline-block;
padding: 0px;
height:30px;
width:30px;
background: none;
}
div.options > label > input:checked +img {
background: url(http://cdn1.iconfinder.com/data/icons/onebit/PNG/onebit_34.png);
background-repeat: no-repeat;
background-position:center center;
background-size:30px 30px;
}<div class="options">
<label title="item1">
<input type="radio" name="foo" value="0" />
Item 1
<img />
</label>
<label title="item2">
<input type="radio" name="foo" value="1" />
Item 2
<img />
</label>
<label title="item3">
<input type="radio" name="foo" value="2" />
Item 3
<img />
</label>
</div>回答by Beej
I tweaked user2314737's answer to use font awesomefor the icon. For those unfamiliar with fa, one significant benefit over img's is the vector based rendering inherent to fonts. I.e. no image jaggies at any zoom level.
我调整了 user2314737 的答案，为图标使用了很棒的字体。对于那些不熟悉 fa 的人来说，与 img 相比的一个显着优势是字体固有的基于矢量的渲染。即在任何缩放级别都没有图像锯齿。
jsFiddle
js小提琴
Result
结果
div.checkRadioContainer > label > input {
visibility: hidden;
}
div.checkRadioContainer {
max-width: 10em;
}
div.checkRadioContainer > label {
display: block;
border: 2px solid grey;
margin-bottom: -2px;
cursor: pointer;
}
div.checkRadioContainer > label:hover {
background-color: AliceBlue;
}
div.checkRadioContainer > label > span {
display: inline-block;
vertical-align: top;
line-height: 2em;
}
div.checkRadioContainer > label > input + i {
visibility: hidden;
color: green;
margin-left: -0.5em;
margin-right: 0.2em;
}
div.checkRadioContainer > label > input:checked + i {
visibility: visible;
}<div class="checkRadioContainer">
<label>
<input type="radio" name="radioGroup" />
<i class="fa fa-check fa-2x"></i>
<span>Item 1</span>
</label>
<label>
<input type="radio" name="radioGroup" />
<i class="fa fa-check fa-2x"></i>
<span>Item 2</span>
</label>
<label>
<input type="radio" name="radioGroup" />
<i class="fa fa-check fa-2x"></i>
<span>Item 3</span>
</label>
</div>回答by Md. Rafee
appearanceproperty doesn't work in all browser. You can do like the following-
外观属性不适用于所有浏览器。您可以执行以下操作-
input[type="radio"]{
display: none;
}
label:before{
content:url(http://strawberrycambodia.com/book/admin/templates/default/images/icons/16x16/checkbox.gif);
}
input[type="radio"]:checked+label:before{
content:url(http://www.treatment-abroad.ru/img/admin/icons/16x16/checkbox.gif);
}
<input type="radio" name="gender" id="test1" value="male">
<label for="test1"> check 1</label>
<input type="radio" name="gender" value="female" id="test2">
<label for="test2"> check 2</label>
<input type="radio" name="gender" value="other" id="test3">
<label for="test3"> check 3</label> It works IE 8+ and other browsers
它适用于 IE 8+ 和其他浏览器
回答by somsgod
Simple and neat with fontawesome
简单而整洁，字体很棒
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;
}
回答by geek-merlin
Yes, CSS can do this:
是的，CSS 可以做到这一点：
input[type=checkbox] {
display: none;
}
input[type=checkbox] + *:before {
content: "";
display: inline-block;
margin: 0 0.4em;
/* Make some horizontal space. */
width: .6em;
height: .6em;
border-radius: 0.6em;
box-shadow: 0px 0px 0px .5px #888
/* An outer circle. */
;
/* No inner circle. */
background-color: #ddd;
/* Inner color. */
}
input[type=checkbox]:checked + *:before {
box-shadow: 0px 0px 0px .5px #888
/* An outer circle. */
, inset 0px 0px 0px .14em #ddd;
/* An inner circle with above inner color.*/
background-color: #444;
/* The dot color */
}<div>
<input id="check1" type="checkbox" name="check" value="check1" checked>
<label for="check1">Fake Checkbox1</label>
</div>
<div>
<input id="check2" type="checkbox" name="check" value="check2">
<label for="check2">Fake Checkbox2</label>
</div>
<div>
<input id="check2" type="radio" name="check" value="radio1" checked>
<label for="check2">Real Checkbox1</label>
</div>
<div>
<input id="check2" type="radio" name="check" value="radio2">
<label for="check2">Real Checkbox2</label>
</div>回答by Diodeus - James MacFarlane
I don't think you can make a control look like anything other than a control with CSS.
我认为除了使用 CSS 的控件之外，您无法使控件看起来像任何东西。
Your best bet it to make a PRINT button goes to a new page with a graphic in place of the selected radio button, then do a window.print() from there.
最好的办法是让 PRINT 按钮进入一个新页面，用图形代替选定的单选按钮，然后从那里执行 window.print() 。
回答by Vincen77o
Very simple idea using a table and no Javascript. Am I being too simplistic?
使用表格的非常简单的想法，没有 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>
回答by Azimer
So I have been lurking on stack for so many years. This is actually my first time posting on here.
所以我一直潜伏在堆栈上这么多年。这实际上是我第一次在这里发帖。
Anyhow, this might seem insane but I came across this post while struggling with the same issue and came up with a dirty solution. I know there are more elegant ways to perhaps set this as a property value but:
无论如何，这可能看起来很疯狂，但我在解决同一问题时遇到了这篇文章，并提出了一个肮脏的解决方案。我知道有更优雅的方法可以将其设置为属性值，但是：
if you look at lines 12880-12883 in tcpdf.php :
如果您查看 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);
and lines 13135-13138 :
和第 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);
Those widgets are rendered from the zapfdingbats font set... just swap the character codes and voila... checks are radios and/or vice versa. This also opens up ideas to make a custom font set to use here and add some nice styling to your form elements.
这些小部件是从 zapfdingbats 字体集呈现的……只需交换字符代码，瞧……检查是收音机和/或反之亦然。这也开辟了创建自定义字体集以在此处使用的想法，并为您的表单元素添加一些漂亮的样式。
Anyhow, just figured I would offer my two cents ... it worked awesome for me.
无论如何，只是想我会提供我的两美分......它对我来说很棒。
