当单选按钮在css上检查时如何控制其他元素？答案

【问题标题】：How to control other element when radio button is check on css?当单选按钮在css上检查时如何控制其他元素？
【发布时间】：2021-03-20 18:43:32
【问题描述】：

选中单选按钮时如何更改其他元素？我在我的 CSS 代码中使用了 (~) 符号，但它什么也没做这是我的代码：

.pay{
    cursor: pointer;
  width: 100%;
    display: block;
    padding: 8px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid gray;
}
.check input[type="radio"]{
    display: none;
}
/*These are the code i want to work*/
.check input[type="radio"]:checked ~ .pay{
    background: gray;
  color: #888888;
}

<div class="row check">
                        <div class="col-sm-6">
                            <label for="wallet" class="pay">E wallet
                            <input type="radio" id="wallet" name="pay" value="wallet" checked="checked"/>
                            </label>
                        </div>
                        <div class="col-sm-6">
                            <label for="walk" class="pay">Walk In
                            <input type="radio" id="walk" name="pay" value="walk"/>
                            </label>
                        </div>
                    </div>

【问题讨论】：

您将无法使用 css 选择器定位前一个/父元素，这大概是您正在尝试做的事情？
@ProfessorAbronsius 我想在选中单选按钮时更改 .pay 的背景颜色，以便为我的单选按钮进行自定义

标签： html css radio-button

【解决方案1】：

'~'这些小波浪线只适用于后面的兄弟容器，重写你的html如下，你就可以开始了！

<div class="row check">    <div class="col-sm-6">
      <input type="radio" id="wallet" name="pay" value="wallet" checked="checked"/>
      <label for="wallet" class="pay">E wallet</label>
      
    </div>
    <div class="col-sm-6">
      <input type="radio" id="walk" name="pay" value="walk"/>
      <label for="walk" class="pay">Walk In</label>
    </div> </div>

https://jsfiddle.net/bwczegym/5/

【讨论】：

【解决方案2】：

如果您将label.pay 移动到radio 按钮之后，那么我认为您的CSS 符合您的预期。

.pay{
    cursor: pointer;
    width: 100%;
    display: block;
    padding: 8px;
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid gray;
}
.check input[type="radio"]{
    display: none;
}
/*These are the code i want to work*/
.check input[type="radio"]:checked ~ .pay{
    background: gray;
    color: #888888;
}

<div class="row check">
  <div class="col-sm-6">
    <input type="radio" id="wallet" name="pay" value="wallet" checked="checked"/>
    <label for="wallet" class="pay">E wallet</label>
  </div>
  <div class="col-sm-6">
    <input type="radio" id="walk" name="pay" value="walk"/>
    <label for="walk" class="pay">Walk In</label>
  </div>
</div>

【讨论】：

【解决方案3】：

--试试这个--

<div class="row check">
    <div class="col-sm-6">
        <!-- here get the input out of the label tag and make it over it -->
        <input type="radio" id="wallet" name="pay" value="wallet" checked="checked"/>
        <label for="wallet" class="pay">E wallet</label>
    </div>
    <div class="col-sm-6">
         <!-- here get the input out of the label tag and make it over it -->
        <input type="radio" id="walk" name="pay" value="walk"/>
        <label for="walk" class="pay">Walk In</label>
    </div>
</div>

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助，质量更高，更有可能吸引投票。