Question

我的收音机按钮有问题，我在检查时尝试设置边框颜色，没有任何反应。我试图阅读有关它的其他主题，甚至试图粘贴我找到的答案，但它仍然没有改变边框。这可能是我犯的一些愚蠢的错误，但我找不到它，有没有人有答案？非常感谢。

input[type="radio"]:checked:before {
  background: green;
}

input[type="radio"]:checked {
  border-color: orange;
}

<div id="radio">
     <label>
        <input type="radio" name="sexe" value="Homme" id="homme">
        Homme
    </label>
    <label>
        <input type="radio" name="sexe" value="Femme" id="femme">
        Femme
    </label>
</div>

Answer 1

你无法真正改变基本单选按钮的风格。您必须创建自定义单选按钮css。试试这个css：

 input[type='radio'] {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    outline: none;
    border: 3px solid gray;
}

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

input[type="radio"]:checked:before {
    background: green;

}

input[type="radio"]:checked {
  border-color: orange;
}

它对我有用。我希望我能提供帮助。

Answer 2

显然，浏览器不允许在复选框/单选按钮上进行大量自定义样式。 - Jeremy Thille的评论

你可以但是，通过css创建自己的单选按钮，可以在此JsFiddle

中找到此示例。

这里会发生什么：

我们隐藏了borswer的无线电输入
我们通过css .checkmark
我们使用checked，:checked和:after General sibling combinator

~

最后，我们设置checked指标

Example found here

注意，因为这是一个例子，它可能超出您的要求

代码

＆＃13;

/* The container */
.container {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Hide the browser's default radio button */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

＆＃13;

<label class="container">Homme
  <input type="radio" checked="checked" name="sexe">
  <span class="checkmark"></span>
</label>
<label class="container">Femme
  <input type="radio" checked="checked" name="sexe">
  <span class="checkmark"></span>
</label>

＆＃13;

希望这有助于获得理想的结果

选中时单选按钮样式问题

2 个答案: