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

Question

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

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

如果我不能得到这个工作,我会要创建一个复选框影子每个单选按钮,使用JavaScript来保持复选框和单选按钮同步和CSS来显示一个我关心在适当的介质.显然,如果我可以设计它们,它将节省大量的工作.

Answer 1

这个问题发布三年后,几乎可以实现.事实上,它完全可以在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的浏览器,否则我建议不要实现它.

Answer 2

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

Answer 3

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

Answer 4

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">

Answer 5

您可以隐藏默认的无线电外观，然后在伪元素中使用剪辑路径绘制支票，无需 JavaScript。

 label{
     display: block;
      margin-bottom: 10px;
  }

input[type=radio] {
    appearance: none;
    background-color: #fff;
    width: 15px;
    height: 15px;
    border: 2px solid #ccc;
    border-radius: 2px;
    display: inline-grid;
    place-content: center; 
  }

input[type=radio]::before {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    transform-origin: bottom left;
    background-color: #fff;
    clip-path: polygon(13% 50%, 34% 66%, 81% 2%, 100% 18%, 39% 100%, 0 71%);
}

input[type=radio]:checked::before {
    transform: scale(1);
}
input[type=radio]:checked{
    background-color:   #0075FF;
    border: 2px solid #0075FF;
}

<label>
    <input type="radio" name="fruit"> Apple
</label>
<label>
    <input type="radio" name="fruit"> Banana
</label>
<label>
    <input type="radio" name="fruit"> Orange
</label>
<label>
    <input type="radio" name="fruit"> Avocado
</label>

Answer 6

我调整了user2314737的答案,为图标使用字体真棒.对于那些不熟悉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>

Answer 7

是的，它可以使用这个 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>

Answer 8

我认为除了使用 CSS 的控件之外，您无法使控件看起来像任何其他控件。

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