CODEWITHSUNDEEP
htmlcssradio-button
Infinite Button
Infinite Button

Reputation: 75

How to control other element when radio button is check on css?

How do I change other element when radio button is checked? I used (~) symbol in my CSS code but it does nothing here is my code:

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

Upvotes: 1

Views: 1565

Answers (3)

Oualid Sahnoun
Oualid Sahnoun

Reputation: 36

--Try this--

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

Upvotes: 0

Andrew Luong
Andrew Luong

Reputation: 11

'~' these little squigglies only apply to sibling containers that follow, rewrite your html as follows and you are good to go!

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

Upvotes: 1

Professor Abronsius
Professor Abronsius

Reputation: 33804

If you move the label.pay after the radio button then I think your css does what you intended.

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

Upvotes: 0

Related Questions