我一直在尝试使用CSS突出显示一个单选按钮，但是在FireFox中使用样式无法成功。我看到一些使用图像渲染突出显示的方法。是否有一种首选方法可以跨多个浏览器处理单选按钮突出显示？
实施例
<input type="text" style="border-color:#FF0000">
<input type="radio" style="border-color:#FF0000">
文本框的边框为红色，但单选按钮不会采用边框颜色？
答案 0 :(得分：5)
单选按钮是操作系统级别的控件，无法像文本框那样真正地设置样式。如果您将单选按钮包装在DIV中，则可以将突出显示应用于DIV。
答案 1 :(得分：0)
Uniform是一个不错的javascript库，可以用你可以很好地控制的图形版本替换表单控件：http://pixelmatrixdesign.com/uniform/。这本身并不是一个新想法，但Uniform的控制可能是正确做到这一点的最佳尝试 - 它们是健壮的，跨浏览器兼容的，并且在需要时优雅地降级。
答案 2 :(得分：0)
试试这个
<style>.imageless-css-3-form-elements label
{
cursor: hand;
cursor: pointer;
}
.imageless-css-3-form-elements label input[type="checkbox"],
.imageless-css-3-form-elements label input[type="radio"],
.imageless-css-3-form-elements label input[type="checkbox"] + span,
.imageless-css-3-form-elements label input[type="radio"] + span,
.imageless-css-3-form-elements label input[type="checkbox"] + span::before,
.imageless-css-3-form-elements label input[type="radio"] + span::before
{
vertical-align: middle;
}
.imageless-css-3-form-elements label input[type="checkbox"],
.imageless-css-3-form-elements label input[type="radio"]
{
position: absolute;
filter: alpha(opacity=0);
-moz-opacity: 0;
-webkit-opacity: 0;
opacity: 0;
}
.imageless-css-3-form-elements label input[type="checkbox"] + span,
.imageless-css-3-form-elements label input[type="radio"] + span,
.imageless-css-3-form-elements label input[type="checkbox"] + span::before,
.imageless-css-3-form-elements label input[type="radio"] + span::before
{
display: inline-block;
}
.imageless-css-3-form-elements label input[type="checkbox"] + span,
.imageless-css-3-form-elements label input[type="radio"] + span
{
font: normal 13px/14px "Segoe UI", Sans-serif;
}
.imageless-css-3-form-elements label input[type="checkbox"] + span::before
{
content: "\2714";
}
.imageless-css-3-form-elements label input[type="checkbox"] + span::before,
.imageless-css-3-form-elements label input[type="radio"] + span::before
{
text-indent: -9999px;
width: 12px;
height: 12px;
font: bold 12px/12px Garamond, "Segoe UI", Sans-serif;
text-transform: uppercase;
border: solid 1px #0b70cd;
border-radius: 3px;
box-shadow: 0 0 1px 1px #ccc;
background: #0b70cd;
background: -moz-linear-gradient(-45deg, #fefefe, #0b70cd);
background: -webkit-linear-gradient(-45deg, #fefefe, #0b70cd);
background: -o-linear-gradient(-45deg, #fefefe, #0b70cd);
background: -ms-linear-gradient(-45deg, #fefefe, #0b70cd);
background: linear-gradient(-45deg, #fefefe, #0b70cd);
margin: 0 4px 0 0;
}
.imageless-css-3-form-elements label:hover input[type="checkbox"]:not(:disabled) + span::before,
.imageless-css-3-form-elements label:hover input[type="radio"]:not(:disabled) + span::before
{
background: #0b70cd;
background: -moz-linear-gradient(45deg, #fefefe, #0b70cd);
background: -webkit-linear-gradient(45deg, #fefefe, #0b70cd);
background: -o-linear-gradient(45deg, #fefefe, #0b70cd);
background: -ms-linear-gradient(45deg, #fefefe, #0b70cd);
background: linear-gradient(45deg, #fefefe, #0b70cd);
box-shadow: 0 0 1px 2px #ccc;
}
.imageless-css-3-form-elements label input[type="checkbox"]:checked + span::before,
.imageless-css-3-form-elements label input[type="radio"]:checked + span::before
{
text-indent: 2px;
color: #fff;
text-shadow: 0 0 2px #0b70cd;
}
.imageless-css-3-form-elements label input[type="radio"] + span::before
{
content: "\2022";
font-size: 22px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
}
.imageless-css-3-form-elements label input[type="radio"]:checked + span::before
{
text-indent: 2px;
}
.imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
.imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
{
filter: alpha(opacity=50);
-moz-opacity: .5;
-webkit-opacity: .5;
opacity: .5;
}
.imageless-css-3-form-elements label input[type="checkbox"]:disabled + span,
.imageless-css-3-form-elements label input[type="radio"]:disabled + span,
.imageless-css-3-form-elements label input[type="checkbox"]:disabled + span::before,
.imageless-css-3-form-elements label input[type="radio"]:disabled + span::before
{
cursor: default;
}
</style>
<h2>Imageless CSS3 Checkboxes</h2>
<h3>Enabled</h3>
<ul class="imageless-css-3-form-elements">
<li><label><input type="checkbox"><span>unchecked</span></label></li>
<li><label><input type="checkbox" checked="checked"><span>checked</span></label></li>
</ul>
<h3>Disabled</h3>
<ul class="imageless-css-3-form-elements">
<li><label><input type="checkbox" disabled="disabled"><span>unchecked</span></label></li>
<li><label><input type="checkbox" checked="checked" disabled="disabled"><span>checked</span></label></li>
</ul>
<h2>Imageless CSS3 Radio Buttons</h2>
<h3>Enabled Group</h3>
<ul class="imageless-css-3-form-elements">
<li><label><input type="radio" checked="checked" name="radio-button-group-0"><span>radio</span></label></li>
<li><label><input type="radio" name="radio-button-group-0"><span>radio</span></label></li>
<li><label><input type="radio" name="radio-button-group-0"><span>radio</span></label></li>
</ul>
<h3>Disabled Group</h3>
<ul class="imageless-css-3-form-elements">
<li><label><input type="radio" name="radio-button-group-1" disabled="disabled"><span>disabled radio</span></label></li>
<li><label><input type="radio" checked="checked" name="radio-button-group-1" disabled="disabled"><span>disabled radio</span></label></li>
<li><label><input type="radio" name="radio-button-group-1" disabled="disabled"><span>disabled radio</span></label></li>
</ul>