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.
This question is related to
html
css
radio-button
The answer is
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 {_x000D_
visibility: hidden;_x000D_
}_x000D_
_x000D_
div.checkRadioContainer {_x000D_
max-width: 10em;_x000D_
}_x000D_
div.checkRadioContainer > label {_x000D_
display: block;_x000D_
border: 2px solid grey;_x000D_
margin-bottom: -2px;_x000D_
cursor: pointer;_x000D_
}_x000D_
_x000D_
div.checkRadioContainer > label:hover {_x000D_
background-color: AliceBlue;_x000D_
}_x000D_
_x000D_
div.checkRadioContainer > label > span {_x000D_
display: inline-block;_x000D_
vertical-align: top;_x000D_
line-height: 2em;_x000D_
}_x000D_
_x000D_
div.checkRadioContainer > label > input + i {_x000D_
visibility: hidden;_x000D_
color: green;_x000D_
margin-left: -0.5em;_x000D_
margin-right: 0.2em;_x000D_
}_x000D_
_x000D_
div.checkRadioContainer > label > input:checked + i {_x000D_
visibility: visible;_x000D_
}<div class="checkRadioContainer">_x000D_
<label>_x000D_
<input type="radio" name="radioGroup" />_x000D_
<i class="fa fa-check fa-2x"></i>_x000D_
<span>Item 1</span>_x000D_
</label>_x000D_
<label>_x000D_
<input type="radio" name="radioGroup" />_x000D_
<i class="fa fa-check fa-2x"></i>_x000D_
<span>Item 2</span>_x000D_
</label>_x000D_
<label>_x000D_
<input type="radio" name="radioGroup" />_x000D_
<i class="fa fa-check fa-2x"></i>_x000D_
<span>Item 3</span>_x000D_
</label>_x000D_
</div>appearance property doesn't work in all browser. You can do like the following-
input[type="radio"]{_x000D_
display: none;_x000D_
}_x000D_
label:before{_x000D_
content:url(http://strawberrycambodia.com/book/admin/templates/default/images/icons/16x16/checkbox.gif);_x000D_
}_x000D_
input[type="radio"]:checked+label:before{_x000D_
content:url(http://www.treatment-abroad.ru/img/admin/icons/16x16/checkbox.gif);_x000D_
} _x000D_
<input type="radio" name="gender" id="test1" value="male">_x000D_
<label for="test1"> check 1</label>_x000D_
<input type="radio" name="gender" value="female" id="test2">_x000D_
<label for="test2"> check 2</label>_x000D_
<input type="radio" name="gender" value="other" id="test3">_x000D_
<label for="test3"> check 3</label> It works IE 8+ and other browsers
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;
}
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.
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.
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.
.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>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.
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"] {_x000D_
-webkit-appearance: checkbox; /* Chrome, Safari, Opera */_x000D_
-moz-appearance: checkbox; /* Firefox */_x000D_
-ms-appearance: checkbox; /* not currently supported */_x000D_
}<label><input type="radio" name="radio"> Checkbox 1</label>_x000D_
<label><input type="radio" name="radio"> Checkbox 2</label>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.
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.
appearance property doesn't work in all browser. You can do like the following-
input[type="radio"]{_x000D_
display: none;_x000D_
}_x000D_
label:before{_x000D_
content:url(http://strawberrycambodia.com/book/admin/templates/default/images/icons/16x16/checkbox.gif);_x000D_
}_x000D_
input[type="radio"]:checked+label:before{_x000D_
content:url(http://www.treatment-abroad.ru/img/admin/icons/16x16/checkbox.gif);_x000D_
} _x000D_
<input type="radio" name="gender" id="test1" value="male">_x000D_
<label for="test1"> check 1</label>_x000D_
<input type="radio" name="gender" value="female" id="test2">_x000D_
<label for="test2"> check 2</label>_x000D_
<input type="radio" name="gender" value="other" id="test3">_x000D_
<label for="test3"> check 3</label> It works IE 8+ and other browsers
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.
.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>This is my solution using only CSS (Jsfiddle: http://jsfiddle.net/xykPT/).
div.options > label > input {_x000D_
visibility: hidden;_x000D_
}_x000D_
_x000D_
div.options > label {_x000D_
display: block;_x000D_
margin: 0 0 0 -10px;_x000D_
padding: 0 0 20px 0; _x000D_
height: 20px;_x000D_
width: 150px;_x000D_
}_x000D_
_x000D_
div.options > label > img {_x000D_
display: inline-block;_x000D_
padding: 0px;_x000D_
height:30px;_x000D_
width:30px;_x000D_
background: none;_x000D_
}_x000D_
_x000D_
div.options > label > input:checked +img { _x000D_
background: url(http://cdn1.iconfinder.com/data/icons/onebit/PNG/onebit_34.png);_x000D_
background-repeat: no-repeat;_x000D_
background-position:center center;_x000D_
background-size:30px 30px;_x000D_
}<div class="options">_x000D_
<label title="item1">_x000D_
<input type="radio" name="foo" value="0" /> _x000D_
Item 1_x000D_
<img />_x000D_
</label>_x000D_
<label title="item2">_x000D_
<input type="radio" name="foo" value="1" />_x000D_
Item 2_x000D_
<img />_x000D_
</label> _x000D_
<label title="item3">_x000D_
<input type="radio" name="foo" value="2" />_x000D_
Item 3_x000D_
<img />_x000D_
</label>_x000D_
</div>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.
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;
}
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"] {_x000D_
-webkit-appearance: checkbox; /* Chrome, Safari, Opera */_x000D_
-moz-appearance: checkbox; /* Firefox */_x000D_
-ms-appearance: checkbox; /* not currently supported */_x000D_
}<label><input type="radio" name="radio"> Checkbox 1</label>_x000D_
<label><input type="radio" name="radio"> Checkbox 2</label>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.
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.
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 {_x000D_
visibility: hidden;_x000D_
}_x000D_
_x000D_
div.checkRadioContainer {_x000D_
max-width: 10em;_x000D_
}_x000D_
div.checkRadioContainer > label {_x000D_
display: block;_x000D_
border: 2px solid grey;_x000D_
margin-bottom: -2px;_x000D_
cursor: pointer;_x000D_
}_x000D_
_x000D_
div.checkRadioContainer > label:hover {_x000D_
background-color: AliceBlue;_x000D_
}_x000D_
_x000D_
div.checkRadioContainer > label > span {_x000D_
display: inline-block;_x000D_
vertical-align: top;_x000D_
line-height: 2em;_x000D_
}_x000D_
_x000D_
div.checkRadioContainer > label > input + i {_x000D_
visibility: hidden;_x000D_
color: green;_x000D_
margin-left: -0.5em;_x000D_
margin-right: 0.2em;_x000D_
}_x000D_
_x000D_
div.checkRadioContainer > label > input:checked + i {_x000D_
visibility: visible;_x000D_
}<div class="checkRadioContainer">_x000D_
<label>_x000D_
<input type="radio" name="radioGroup" />_x000D_
<i class="fa fa-check fa-2x"></i>_x000D_
<span>Item 1</span>_x000D_
</label>_x000D_
<label>_x000D_
<input type="radio" name="radioGroup" />_x000D_
<i class="fa fa-check fa-2x"></i>_x000D_
<span>Item 2</span>_x000D_
</label>_x000D_
<label>_x000D_
<input type="radio" name="radioGroup" />_x000D_
<i class="fa fa-check fa-2x"></i>_x000D_
<span>Item 3</span>_x000D_
</label>_x000D_
</div>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">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.
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.
This is my solution using only CSS (Jsfiddle: http://jsfiddle.net/xykPT/).
div.options > label > input {_x000D_
visibility: hidden;_x000D_
}_x000D_
_x000D_
div.options > label {_x000D_
display: block;_x000D_
margin: 0 0 0 -10px;_x000D_
padding: 0 0 20px 0; _x000D_
height: 20px;_x000D_
width: 150px;_x000D_
}_x000D_
_x000D_
div.options > label > img {_x000D_
display: inline-block;_x000D_
padding: 0px;_x000D_
height:30px;_x000D_
width:30px;_x000D_
background: none;_x000D_
}_x000D_
_x000D_
div.options > label > input:checked +img { _x000D_
background: url(http://cdn1.iconfinder.com/data/icons/onebit/PNG/onebit_34.png);_x000D_
background-repeat: no-repeat;_x000D_
background-position:center center;_x000D_
background-size:30px 30px;_x000D_
}<div class="options">_x000D_
<label title="item1">_x000D_
<input type="radio" name="foo" value="0" /> _x000D_
Item 1_x000D_
<img />_x000D_
</label>_x000D_
<label title="item2">_x000D_
<input type="radio" name="foo" value="1" />_x000D_
Item 2_x000D_
<img />_x000D_
</label> _x000D_
<label title="item3">_x000D_
<input type="radio" name="foo" value="2" />_x000D_
Item 3_x000D_
<img />_x000D_
</label>_x000D_
</div>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>
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.
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">Yes, CSS can do this:
input[type=checkbox] {_x000D_
display: none;_x000D_
}_x000D_
input[type=checkbox] + *:before {_x000D_
content: "";_x000D_
display: inline-block;_x000D_
margin: 0 0.4em;_x000D_
/* Make some horizontal space. */_x000D_
width: .6em;_x000D_
height: .6em;_x000D_
border-radius: 0.6em;_x000D_
box-shadow: 0px 0px 0px .5px #888_x000D_
/* An outer circle. */_x000D_
;_x000D_
/* No inner circle. */_x000D_
background-color: #ddd;_x000D_
/* Inner color. */_x000D_
}_x000D_
input[type=checkbox]:checked + *:before {_x000D_
box-shadow: 0px 0px 0px .5px #888_x000D_
/* An outer circle. */_x000D_
, inset 0px 0px 0px .14em #ddd;_x000D_
/* An inner circle with above inner color.*/_x000D_
background-color: #444;_x000D_
/* The dot color */_x000D_
}<div>_x000D_
<input id="check1" type="checkbox" name="check" value="check1" checked>_x000D_
<label for="check1">Fake Checkbox1</label>_x000D_
</div>_x000D_
<div>_x000D_
<input id="check2" type="checkbox" name="check" value="check2">_x000D_
<label for="check2">Fake Checkbox2</label>_x000D_
</div>_x000D_
<div>_x000D_
<input id="check2" type="radio" name="check" value="radio1" checked>_x000D_
<label for="check2">Real Checkbox1</label>_x000D_
</div>_x000D_
<div>_x000D_
<input id="check2" type="radio" name="check" value="radio2">_x000D_
<label for="check2">Real Checkbox2</label>_x000D_
</div>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.
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>
Yes, CSS can do this:
input[type=checkbox] {_x000D_
display: none;_x000D_
}_x000D_
input[type=checkbox] + *:before {_x000D_
content: "";_x000D_
display: inline-block;_x000D_
margin: 0 0.4em;_x000D_
/* Make some horizontal space. */_x000D_
width: .6em;_x000D_
height: .6em;_x000D_
border-radius: 0.6em;_x000D_
box-shadow: 0px 0px 0px .5px #888_x000D_
/* An outer circle. */_x000D_
;_x000D_
/* No inner circle. */_x000D_
background-color: #ddd;_x000D_
/* Inner color. */_x000D_
}_x000D_
input[type=checkbox]:checked + *:before {_x000D_
box-shadow: 0px 0px 0px .5px #888_x000D_
/* An outer circle. */_x000D_
, inset 0px 0px 0px .14em #ddd;_x000D_
/* An inner circle with above inner color.*/_x000D_
background-color: #444;_x000D_
/* The dot color */_x000D_
}<div>_x000D_
<input id="check1" type="checkbox" name="check" value="check1" checked>_x000D_
<label for="check1">Fake Checkbox1</label>_x000D_
</div>_x000D_
<div>_x000D_
<input id="check2" type="checkbox" name="check" value="check2">_x000D_
<label for="check2">Fake Checkbox2</label>_x000D_
</div>_x000D_
<div>_x000D_
<input id="check2" type="radio" name="check" value="radio1" checked>_x000D_
<label for="check2">Real Checkbox1</label>_x000D_
</div>_x000D_
<div>_x000D_
<input id="check2" type="radio" name="check" value="radio2">_x000D_
<label for="check2">Real Checkbox2</label>_x000D_
</div>Source: Stackoverflow.com