Question

我试图让我的CSS在复选框后影响第二个元素。在我的示例中，我在未选中时显示Font Awesome符号，在选中时显示不同的符号。目前，图标隐藏，未选中的图标显示，但选中的图标不显示。请参阅以下代码或JSFiddle。

我尝试将相邻规则（+）与input:checked + n + y和包含规则（〜）与input:checked ~ n + y一起使用，甚至nth-child变体也没有运气。 IMO如果我可以通过CSS将元素消失，我应该能够重新出现，我希望我还没有为了简单的事情而撕掉我的头发。我已经了解了有关SO的其他问题，甚至尝试input:checked + n + y {}的解决方法似乎也没有帮助。

P.S。我担心Javascript替代方案对我没有帮助。

＆＃13;

.container {
}
.container > label {
    display: block;
    cursor: pointer;
}
.container > label > input {
    visibility: hidden;
}
.container > label > span {
    display: inline-block;
}
.container > label > input + n {
    color: #C77AA6;
}
.container > label > input:checked + n {
    display: none;
}
.container > label > input + n + y {
    display: none;
}
.container > label > input:checked + n + y {
    color: #C77AA6;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
    <label>
        <input type="radio" name="radioGroup" />
        <n class="fa fa-square-o fa-1x"></n>
        <y class="fa fa-check-square-o fa-1x"></y>
        Item 1
    </label>
    <label>
        <input type="radio" name="radioGroup" />
        <n class="fa fa-square-o fa-1x"></n>
        <y class="fa fa-check-square-o fa-1x"></y>
        Item 2
    </label>
    <label>
        <input type="checkbox" name="radioGroup" />
        <n class="fa fa-square-o fa-1x"></n>
        <y class="fa fa-check-square-o fa-1x"></y>
        Item 2a
    </label>
    <label>
        <input type="checkbox" name="radioGroup" />
        <n class="fa fa-square-o fa-1x"></n>
        <y class="fa fa-check-square-o fa-1x"></y>
        Item 3
    </label>
</div>

＆＃13;

Answer 1

选择器看起来很好，你可能会错过这个：

.container > label > input:checked + n + y {
    color: #C77AA6;
    display: inline-block; /*add this*/
}

旁注，radio和checkbox功能不同，它们看起来不一样。我通过使用fa-circle-o和fa-dot-circle-o来确定无线电图标。

.container {
}
.container > label {
    display: block;
    cursor: pointer;
}
.container > label > input {
    visibility: hidden;
}
.container > label > span {
    display: inline-block;
}
.container > label > input + n {
    color: #C77AA6;
}
.container > label > input:checked + n {
    display: none;
}
.container > label > input + n + y {
    display: none;
}
.container > label > input:checked + n + y {
    color: #C77AA6;
    display: inline-block;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="container">
    <label>
        <input type="radio" name="radioGroup" />
        <n class="fa fa-circle-o fa-1x"></n>
        <y class="fa fa-dot-circle-o fa-1x"></y>
        Item 1
    </label>
    <label>
        <input type="radio" name="radioGroup" />
        <n class="fa fa-circle-o fa-1x"></n>
        <y class="fa fa-dot-circle-o fa-1x"></y>
        Item 2
    </label>
    <label>
        <input type="checkbox" name="radioGroup" />
        <n class="fa fa-square-o fa-1x"></n>
        <y class="fa fa-check-square-o fa-1x"></y>
        Item 2a
    </label>
    <label>
        <input type="checkbox" name="radioGroup" />
        <n class="fa fa-square-o fa-1x"></n>
        <y class="fa fa-check-square-o fa-1x"></y>
        Item 3
    </label>
</div>

CSS允许元素消失但不会在检查事件

1 个答案: