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

在CSS3中:

input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}

事实上:

@media screen {.fakecheckbox img {display:none}}
@media print {.fakecheckbox input {display:none;}}

并且你需要Javascript来保持和无线电同步(并且理想情况下首先将它们插入那里).

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

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

	
		 
		Item 1
		
	
	
		
		Item 2
		
	   
	
		
		Item 3
		
	

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

	
		
		
		Item 1
	
	
		
		
		Item 2
	
	
		
		
		Item 3