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

Question

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

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

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

score 109 · Accepted Answer

在发布此问题三年后，这几乎触手可及。事实上，在 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 的浏览器。

score 26 · Accepted Answer

这是我仅使用 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>

score 25 · Accepted Answer

在 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;}}

并且您将需要 Javascript 来保持<img>和无线电同步（理想情况下首先将它们插入那里）。

我用过<img>，因为浏览器通常配置为不打印background-image。使用图像比使用其他控件更好，因为图像是非交互式的，不太可能导致问题。

score 7 · Accepted Answer

2021 年的纯香草 CSS / HTML 解决方案。它使用 CSSappearance: none;属性。

目前似乎兼容所有主流浏览器：

https://caniuse.com/?search=appearance%3A%20none

input[type="radio"]{
   appearance: none;
   border: 1px solid #d3d3d3;
   width: 30px;
   height: 30px;
   content: none;
   outline: none;
   margin: 0;
   box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

input[type="radio"]:checked {
  appearance: none;
  outline: none;
  padding: 0;
  content: none;
  border: none;
}

input[type="radio"]:checked::before{
  position: absolute;
  color: green !important;
  content: "\00A0\2713\00A0" !important;
  border: 1px solid #d3d3d3;
  font-weight: bolder;
  font-size: 21px;
}

<input type="radio" name="radio" checked>
<input type="radio" name="radio">
<input type="radio" name="radio">

score 7 · Accepted Answer

是的，它可以使用这个 css 来完成，我隐藏了默认单选按钮并制作了一个看起来像复选框的自定义单选按钮。2022 年工作完美。

.css-prp
{
  color: #17CBF2;
  font-family: arial;
}


.con1 {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.con1 input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: lightgrey;
  border-radius: 10%;
}

/* When the radio button is checked, add a blue background */
.con1 input:checked ~ .checkmark {
  background-color: #17CBF2;
}

<label class="con1"><span>Yes</span>
  <input type="radio" name="radio1" checked>
  <span class="checkmark"></span>
</label>
<label class="con1"><span>No</span>
  <input type="radio" name="radio1">
  <span class="checkmark"></span>
</label>

score 6 · Accepted Answer

我调整了 user2314737 的答案以使用font awesome作为图标。对于那些不熟悉 fa 的人来说，img 的一个显着优势是字体固有的基于矢量的渲染。即在任何缩放级别都没有图像锯齿。

jsFiddle

结果

在此处输入图像描述

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>

score 2 · Accepted Answer

简单整洁的字体真棒

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;
}

score 1 · Accepted Answer

外观属性不适用于所有浏览器。您可以执行以下操作 -

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>

它适用于 IE 8+ 和其他浏览器

score 0 · Accepted Answer

我不认为您可以使控件看起来像使用 CSS 的控件以外的任何东西。

最好的办法是让 PRINT 按钮转到一个新页面，并用图形代替所选单选按钮，然后从那里执行 window.print() 。

score 0 · Accepted Answer

是的，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>

score -1 · Accepted Answer

所以我一直潜伏在堆栈上这么多年。这实际上是我第一次在这里发帖。

无论如何，这可能看起来很疯狂，但我在为同样的问题苦苦挣扎时遇到了这篇文章，并想出了一个肮脏的解决方案。我知道有更优雅的方法可以将其设置为属性值，但是：

如果您查看 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);

这些小部件是从 zapfdingbats 字体集呈现的……只需交换字符代码，瞧……检查是收音机和/或反之亦然。这也开启了制作自定义字体集以在此处使用并为您的表单元素添加一些漂亮样式的想法。

无论如何，只是想我会提供我的两分钱......这对我来说太棒了。

score -3 · Accepted Answer

使用表格而不使用 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>

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

12 回答 12

jsFiddle

结果

Related

Reference