首页 文章

你可以设置一个html单选按钮看起来像一个复选框吗？

提问于
浏览 次
53

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

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

如果我无法完成这项工作，我将不得不创建一个复选框来遮蔽每个单选按钮，使用javascript来保持复选框和单选按钮同步，并使用css显示我在适当介质中关注的那个 . 显然，如果我可以设计它们，它将节省大量的工作 .

html css radio-button

8 回答

  • 0

    这个问题发布三年后，几乎可以实现 . 实际上，使用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>

    jsfiddle：http://jsfiddle.net/mq8Zq/

    Note: 由于缺乏供应商的支持和一致性，这最终从CSS3规范中删除 . 除非你只需要支持基于Webkit或Gecko的浏览器，否则我建议不要实现它 .

    回复于
  • -1

    在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 . 使用图像比使用其他控件更好，因为图像是非交互式的，不太可能导致问题 .

    回复于
  • 25

    这是我的解决方案，只使用CSS（Jsfiddle：http://jsfiddle.net/xykPT/） .

    enter image description here

    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>
    回复于
  • 98

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

    jsFiddle

    结果

    enter image description here

    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>
    回复于
  • 21

    appearance 属性不适用于所有浏览器 . 你可以这样做 -

    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和其他浏览器

    回复于
  • 6

    我不认为你可以使控件看起来像CSS控件之外的任何东西 .

    你最好打一个PRINT按钮进入一个新的页面，用一个图形代替所选的单选按钮，然后从那里做一个window.print（） .

    回复于
  • 1

    是的，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>
    回复于
  • 0

    使用表而没有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>
    回复于

相关问题