我有一个用户填写并打印的html表单。一旦打印出来,这些表格将被传真或邮寄给政府机构,并且需要看起来像该机构公布的原始表格,政府官员没有发现这是一个复制品。在表单中输入的数据不会保存在任何地方,甚至不会提交回Web服务器。重要的是我们的用户可以在我们的内部网站点上轻松找到这些表单,并使用普通键盘输入表格进行打印。
在屏幕上,我想按原样保留单选按钮,以强制执行和传达单选按钮的使用(仅选择一个选项)。但是,当它打印出来时,我需要使用方形复选框样式而不是圆形单选按钮样式进行打印。我知道如何使用媒体选择器来设置仅用于打印的样式,所以这不是问题。只是我不知道我是否可以像我想要的那样设置单选按钮的样式。
如果我无法正常工作,我将不得不创建一个复选框来遮蔽每个单选按钮,使用javascript来保持复选框和单选按钮同步,并使用css显示我关心的那个介质。显然,如果我可以设计它们,那将节省大量的工作。
答案 0 :(得分:100)
此问题发布三年后,这几乎是触手可及的。实际上,使用CSS3 appearance
属性在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>
注意:由于缺乏供应商的支持和一致性,最终会从CSS3规范中删除。除非你只需要支持基于Webkit或Gecko的浏览器,否则我建议不要实现它。
答案 1 :(得分:25)
在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
。使用图像比使用其他控件更好,因为图像是非交互式的,不太可能导致问题。
答案 2 :(得分:22)
这是我的解决方案,仅使用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>
答案 3 :(得分:6)
我调整了user2314737的答案,使用font awesome作为图标。对于那些不熟悉fa的人来说,与img相比,一个显着的好处是字体固有的基于矢量的渲染。即在任何缩放级别都没有图像锯齿。
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;
}
&#13;
<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>
&#13;
答案 4 :(得分:5)
是的,可以使用此CSS来完成,我已经隐藏了默认单选按钮,并制作了一个类似于复选框的自定义单选按钮。
.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>
答案 5 :(得分:3)
2021 年的纯 Vanilla CSS/HTML 解决方案。它使用 CSS appearance: 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">
答案 6 :(得分:2)
简单而整洁,字体很棒
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;
}
答案 7 :(得分:1)
外观属性在所有浏览器中都不起作用。您可以执行以下操作 -
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+和其他浏览器
答案 8 :(得分:0)
我不认为你可以让控件看起来像CSS以外的任何控件。
你最好打一个PRINT按钮进入一个新的页面,用一个图形代替所选的单选按钮,然后从那里做一个window.print()。
答案 9 :(得分:0)
是的,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>
答案 10 :(得分:-1)
使用表而不是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>
答案 11 :(得分:-1)
所以我已经潜伏了很多年了。这实际上是我第一次在这里发布。
无论如何,这似乎很疯狂,但我在努力解决同一问题时遇到了这篇文章,并提出了一个肮脏的解决方案。我知道还有其他一些更优雅的方法可以将其设置为属性值,但是:
如果您在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字体集中呈现的...只需交换字符代码并瞧瞧...检查是否是单选按钮,反之亦然。这也为创建自定义字体集提供了思路,并在其中添加了一些漂亮的样式。
无论如何,只是想出了我愿意付给我的两分钱……对我来说真棒。