CODEWITHSUNDEEP
csshtml
Derek
Derek

Reputation: 8630

CSS change when specific radio button is checked using :checked pseudo class

The code below will allow me to alter the css of any sibling div element when the checkbox is checked:-

input[type="radio"]:checked ~ div{
  display:none;
}

What i need to do is target a specific div either by its Id or its class when a specific radio button in the list is checked.

I want to try and to this Purely in CSS.

Ive tried doing this :-

input[type="radio"]:checked ~ #one.div{
display:none;
}

https://codepen.io/dyk3r5/pen/WOmxpV?editors=1111

<div class="container">


   <input type="radio" id="opt1" name="radiolist" checked>
   <label for='opt1'>New Account</label>


   <input type="radio" id="opt2" name="radiolist">
   <label for='opt2'>Existing Account</label>

  <div id="one">Lorem Ipsum 1</div>
  <div id="two">Lorem Ipsum 2</div>

</div>

html, body{
  height :100%;
}

.container{

  display:flex;
  justify-content:center;
}

label{
  color:#000;
  font-weight:600;

  height: 25px;
  padding: 5px 10px;
  border-bottom: 2px solid lightgrey;
  margin: 5px 1px;

}

input[type="radio"]{
  display:none;
}

input[type="radio"]:checked + label{
   border-bottom: 2px solid red;
}

input[type="radio"]:checked ~ div{
display:none;
}

Upvotes: 0

Views: 880

Answers (1)

sorayadragon
sorayadragon

Reputation: 1087

I updated the css to display the corresponding div when a certain radio button is selected. The problem is your selector for the div: #one.div. This targets the element with id "one" and class "div". It should be div#one instead.

html,
body {
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
}

label {
  color: #000;
  font-weight: 600;
  height: 25px;
  padding: 5px 10px;
  border-bottom: 2px solid lightgrey;
  margin: 5px 1px;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked+label {
  border-bottom: 2px solid red;
}

input[type="radio"]~div {
  display: none;
}

input[type="radio"][id="opt1"]:checked~div#one,
input[type="radio"][id="opt2"]:checked~div#two {
  display: block;
}
<div class="container">


  <input type="radio" id="opt1" name="radiolist" checked>
  <label for='opt1'>New Account</label>


  <input type="radio" id="opt2" name="radiolist">
  <label for='opt2'>Existing Account</label>

  <div id="one">Lorem Ipsum 1</div>
  <div id="two">Lorem Ipsum 2</div>

</div>

Upvotes: 1

Related Questions