Can you style an html radio button to look like a checkbox?

Question

I have an html form that a user will fill out and print. Once printed, these forms will be faxed or mailed to a government agency, and need to look close enough like the original form published by said agency that a government bureaucrat doesn't spot that this is a reproduction. The data entered in the form is not saved anywhere or even submitted back to a web server. All that matters is that our users can easily find these forms on our intranet site and type into the form for printing with their normal keyboard.

On the screen I want to leave the radio button as-is, to enforce and communicate radio button usage (choose only one option). However, when it prints out I need it to print with the square checkbox style rather than the round radio button style. I know how to use a media selector to set styles for print only, so that's not the issue. It's just that I don't know if I can style the radio button like I want at all.

If I can't get this working I'm gonna have to create a checkbox to shadow each radio button, use javascript to keep the checkboxes and radio buttons in sync, and css to show the one I care about in the proper medium. Obviously if I can just style them it would save a lot of work.

Answer 1

Three years after this question is posted and this is almost within reach. In fact, it's completely achievable in Firefox 1+, Chrome 1+, Safari 3+ and Opera 15+ using the CSS3 appearance property.

The result is radio elements that look like checkboxes:

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: this was eventually dropped from the CSS3 specification due to a lack of support and conformance from vendors. I'd recommend against implementing it unless you only need to support Webkit or Gecko based browsers.

Answer 2

This is my solution using only 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>