如何更改资源管理器中的单选按钮颜色？答案

【问题标题】：How to change the radio button color in Explorer?如何更改资源管理器中的单选按钮颜色？
【发布时间】：2016-01-13 15:28:42
【问题描述】：

     input[type='radio'] {
        -webkit-appearance: none;
        width: 13px;
        height: 13px;
        border-radius: 50% !important;
        border: 1px solid darkgray;
        outline: none;
        box-shadow: 0 0 5px 0px gray inset !important;
    }

        input[type='radio']:before {
            content: '';
            display: block;
            width: 60%;
            height: 60%;
            margin: 20% auto;
            border-radius: 50% !important;
        }

        input[type='radio']:checked:before {
            background: #0073CF !important;
        }

0073CF 颜色在 chrome 和 firefox 中应用。不适用于 Explorer 。我将如何解决它。

        <asp:RadioButton ID="grdSelect" GroupName="Name" CssClass="gridRadioButton"  runat="server" ItemStyle-Width="10%"></asp:RadioButton>

这是我的 asp.net 按钮

在 Internet Explorer 中默认颜色为黑色。如何将颜色更改为蓝色？

【问题讨论】：

标签： css internet-explorer cross-browser

【解决方案1】：

根据规范，:before 和 :after 样式不应该与 input 元素一起使用。

Chrome 确实支持它，这就是为什么您的代码可以工作，但其他浏览器不支持的原因。请理解这不是其他浏览器的故障；他们正确地遵循规范。超出正确行为的是 Chrome。

获得所需效果的正确方法是将label 元素与单选按钮关联，并以与您当前为:before 伪元素所做的相同方式设置样式.

【讨论】：

【解决方案2】：

.customRadio > div {width:250px;float:left;}
.customRadio input.radio:empty {display:none;}
.customRadio input.radio:empty ~ label {
	position: relative;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding-left:27px;}
.customRadio input.radio:empty ~ label:before {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	content: '';
	width: 20px;
	height:20px;
	border:solid 2px #fff;
	border-radius: 50%;
	-webkit-transition:background-color 0.4s linear;
	-o-transition:background-color 0.4s linear;
	-moz-transition:background-color 0.4s linear;
	transition:background-color 0.4s linear;}
.customRadio input.radio:hover:not(:checked) ~ label:before {
	color: #C2C2C2;}
.customRadio input.radio:hover:not(:checked) ~ label {
	color: #888;}
.customRadio input.radio:checked ~ label:before {
	color: #9CE2AE;
	background-color: #ff9933;}

<div class="customRadio">
	<div class="">
		<input type="radio" name="radio" id="radio1" class="radio" checked/>
		<label for="radio1">Yes</label>
	</div>
	<div class="">
		<input type="radio" name="radio" id="radio2" class="radio"/>
		<label for="radio2">No</label>
	</div>
</div>

【讨论】：

我支持你，但我认为你的代码示例过于复杂。一个演示该技术的简单示例不需要所有的过渡和用户选择；他们只是让它看起来比实际更复杂。

【解决方案3】：

单选按钮的样式功能非常有限，只有 webkit 浏览器才能识别您的自定义样式。您还必须注意 safari 和触摸屏浏览器看起来完全不同。

对于跨浏览器支持，您可以使用此在线生成器，上传您的自定义图像，然后下载并应用到您的页面。 http://www.csscheckbox.com/css-checkbox-generator.php

好在它还支持糟糕的 IE 浏览器。

【讨论】：

【解决方案4】：

使用 css 设置单选按钮的样式仅适用于 webkit 浏览器。如果要在 IE 中设置单选按钮的样式，则必须使用 JS 库。

【讨论】：

如何使用 JS 库。我已经使用了../js/jquery-1.11.3.min.js。 js 文件。
这不是真的——完全可以在没有 JS 的情况下设置单选按钮的样式；你只需要有一个<label> 元素。见stackoverflow.com/questions/4641752/…