Question

如果通过css检查单选按钮，如何更改Span的颜色文本。以下是我的代码：

<div class="div-box-content">
    <label data-ng-repeat="addType in addressFormatOptions">
        <input name="nameAddressType"
               type="radio"
               class="radio"
               value="{{ addType }}"
               ng-model="exportLablesUserParams.addressFormat" />
            <span></span> {{  addType   }}
     </label>
</div>

css如：

.div-box-content {
    width: 100%;
}
label {
    margin-right: 25px;
    font-weight: bold;
    font-size: 12px;
    color: #696969;
}    

input[type="radio"]:checked + label {
    color: green;
}

label > input[type=radio]:checked {
    color: green !important;
    background-color: green !important;
}

我不明白我在做什么错。请检查css和我的代码，让我知道我的错误，如果可能请更正。提前谢谢。

Answer 1

您无法设置标签样式，因为它是已选中单选按钮的父级。您需要以不同的方式重构HTML或使用JS更改单选按钮更改时的颜色。

Answer 2

根据规定的HTML和要求更改span颜色，而不是label ...

label > input[type=radio]:checked + span {
    color: yourcolorhere;

}

更改从css中选择的无线电上的标签颜色

2 个答案: