你可以devise一个html单选button，看起来像一个checkbox？
我有一个用户将填写和打印的HTML表单。 一旦打印出来，这些表格将被传真或邮寄给政府机构，并且需要像该机构发布的原始表格那样近看，政府官员不会发现这是一个复制品。 在表格中input的数据不会保存在任何地方，甚至不会提交回Web服务器。 重要的是，我们的用户可以很容易地在我们的Intranet网站上find这些表单，并使用正常的键盘input表单进行打印。
在屏幕上，我想离开单选button，强制执行和交stream单选button的使用（只select一个选项）。 但是，当它打印出来，我需要它与方形checkbox样式而不是圆形单选button样式打印。 我知道如何使用媒体select器来设置打印样式，所以这不是问题。 只是我不知道我是否可以像我想要的那样devise单选button。
如果我不能得到这个工作，我将不得不创build一个checkbox，以阴影每个单选button，使用JavaScript来保持checkbox和单选button同步，和CSS显示在适当的媒体我关心的人。 很明显，如果我可以只是他们的样式，这将节省很多工作。
这个问题发布三年后，这个问题几乎可以达到。 事实上，在Firefox 1+，Chrome 1 +，Safari 3+和Opera 15+中使用 CSS3 appearance属性。
结果是无线电元素看起来像checkbox：
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中：
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> ，因为浏览器通常被configuration为不打印background-image 。 使用图片比其他控件更好，因为图片是非交互式的，不太可能导致问题。
这是我的解决scheme只使用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(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>
我调整了user2314737的答案，使用字体棒图标。 对于那些不熟悉fa的人来说，与img相比，一个显着的好处就是基于vector的字体渲染。 即没有图像锯齿在任何缩放级别。
的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>
我不认为你可以使控件看起来像使用CSS的控件。
最好的办法是使打印button进入一个新的页面，用graphics代替所选的单选button，然后从那里做一个window.print（）。
外观属性不适用于所有浏览器。 你可以像下面这样做 –
input[type="radio"]{ display: none; } label:before{ content:url(http://strawberrycambodia.com/book/admin/templates/defaulthttp://img.dovov.comicons/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>
是的，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>
非常简单的想法，使用一个表，没有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>
