Question

     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中，默认颜色为黑色。如何将颜色更改为蓝色？

Answer 1

＆＃13;

.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;}

＆＃13;

<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>

＆＃13;

Answer 2

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

Chrome确实支持它，这就是您的代码有效的原因，但其他浏览器却没有。请理解，这不是其他浏览器的错误;他们正确遵循规范。 Chrome正在超越正确的行为。

获得正在寻找的效果的正确方法是使用与单选按钮关联的label元素，并以与您当前为{{1}相同的方式设置样式}伪元素。

Answer 3

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

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

好消息是它也为糟糕的IE浏览器提供支持。

Answer 4

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

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

4 个答案: