Can you style an html radio button to look like a checkbox?
JavascriptHtmlCssRadio ButtonJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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.
Solution 2 - Javascript
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>
Solution 3 - Javascript
In CSS3:
input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}
In reality:
<span class=fakecheckbox><input type=radio><img src="checkbox.png" alt=""></span>
@media screen {.fakecheckbox img {display:none}}
@media print {.fakecheckbox input {display:none;}}
and you'll need Javascript to keep <img> and radios in sync (and ideally insert them there in a first place).
I've used <img>, because browsers are usually configured not to print background-image. It's better to use image than another control, because image is non-interactive and less likely to cause problems.
Solution 4 - Javascript
Yes it can be done using this css, i've hidden the default radio button and made a custom radio button that looks like a checkbox. Working Perfect in 2022.
.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>
Solution 5 - Javascript
Pure Vanilla CSS / HTML solution in 2021. It uses the CSS appearance: none; property.
Seems to be compatible with all major browsers at this time:
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">
Solution 6 - Javascript
I tweaked user2314737's answer to use font awesome for the icon. For those unfamiliar with fa, one significant benefit over img's is the vector based rendering inherent to fonts. I.e. no image jaggies at any zoom level.
jsFiddle
Result
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>
Solution 7 - Javascript
Simple and neat with fontawesome
input[type=radio] {
-moz-appearance: none;
-webkit-appearance: none;
-o-appearance: none;
outline: none;
content: none;
margin-left: 5px;
}
input[type=radio]:before {
font-family: "FontAwesome";
content: "\f00c";
font-size: 25px;
color: transparent !important;
background: #fff;
width: 25px;
height: 25px;
border: 2px solid black;
margin-right: 5px;
}
input[type=radio]:checked:before {
color: black !important;
}
Solution 8 - Javascript
appearance property doesn't work in all browser. You can do like the following-
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>
It works IE 8+ and other browsers
Solution 9 - Javascript
I don't think you can make a control look like anything other than a control with CSS.
Your best bet it to make a PRINT button goes to a new page with a graphic in place of the selected radio button, then do a window.print() from there.
Solution 10 - Javascript
Yes, CSS can do this:
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>
Solution 11 - Javascript
So I have been lurking on stack for so many years. This is actually my first time posting on here.
Anyhow, this might seem insane but I came across this post while struggling with the same issue and came up with a dirty solution. I know there are more elegant ways to perhaps set this as a property value but:
if you look at lines 12880-12883 in tcpdf.php :
$fx = ((($w - $this->getAbsFontMeasure($tmpfont['cw'][`110`])) / 2) * $this->k);
$fy = (($w - ((($tmpfont['desc']['Ascent'] - $tmpfont['desc']['Descent']) * $this->FontSizePt / 1000) / $this->k)) * $this->k);
$popt['ap']['n'][$onvalue] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`110`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);
$popt['ap']['n']['Off'] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`111`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);
and lines 13135-13138 :
$fx = ((($w - $this->getAbsFontMeasure($tmpfont['cw'][`108`])) / 2) * $this->k);
$fy = (($w - ((($tmpfont['desc']['Ascent'] - $tmpfont['desc']['Descent']) * $this->FontSizePt / 1000) / $this->k)) * $this->k);
$popt['ap']['n']['Yes'] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`108`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);
$popt['ap']['n']['Off'] = sprintf('q %s BT /F%d %F Tf %F %F Td ('.chr(`109`).') Tj ET Q', $this->TextColor, $tmpfont['i'], $this->FontSizePt, $fx, $fy);
Those widgets are rendered from the zapfdingbats font set... just swap the character codes and voila... checks are radios and/or vice versa. This also opens up ideas to make a custom font set to use here and add some nice styling to your form elements.
Anyhow, just figured I would offer my two cents ... it worked awesome for me.
Solution 12 - Javascript
Very simple idea using a table and no Javascript. Am I being too simplistic?
<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>