选中时单选按钮样式出现问题

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

Apparently, browsers don't allow much custom styling on checkboxes/radio buttons. - Jeremy Thille's comment

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

中找到这样的示例

这里发生了什么：

我们隐藏浏览器的无线电输入
我们通过 css .checkmark
我们使用 :checked、:after 和 ~ General sibling combinator

checked

最后，我们设置 checked 指标的样式

Example found here

NOTE, as this is an example, it may be more than you require

代码

/* 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;
}

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

希望这有助于达到您想要的结果

Answer 2

您不能真正改变基本单选按钮的样式。您必须创建一个自定义单选按钮 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;
}

对我有用。希望能帮到你。

选中时单选按钮样式出现问题

Issue with radio button styling when checked

html

css

border

radio-button