CODEWITHSUNDEEP
htmlcss
user5499130
user5499130

Reputation:

CSS: '+' selection operator not working

The background color of the span does not change after the radio button is changed as it should.

Why is this happening? How to fix it?

div {
  margin: 0 0 0.75em 0;
}
.formgroup input[type="radio"] {
  display: none;
}
input[type="radio"],
label {
  color: brown;
  font-family: Arial, sans-serif;
  font-size: 14px;
}
input[type="radio"],
label span {
  display: inline-block;
  width: 19px;
  height: 19px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
input[type="radio"],
label span {
  background-color: brown;
}
  

input[type="radio"]:checked + p + span{
     background-color:orange;
}
input[type="radio"] + span,
input[type="radio"]:checked + span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}
<div class="main">
  <section class="artistpage">
    <div class="search">
      <h1>Artist Directory</h1> 
    </div>
    <ul class="artistlist">
      <li class="artist cf">
        <div class="info">
          <label class="formgroup">
            <input type="radio">
            <span></span>Op1
            <span></span>Op2
            <span></span>Op3
          </label>
        </div>
      </li>
    </ul>
</div>

Whichever radio option I choose, the first one always gets selected.

Upvotes: 1

Views: 81

Answers (2)

Aaron
Aaron

Reputation: 10430

Your problem is your direct sibling selector.

input[type="radio"]:checked + span {
     background-color:orange;
}
input[type="radio"] + span,
input[type="radio"]:checked + span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

Updated with your new query below.

You'd better use the general sibling selector ~

div {
  margin: 0 0 0.75em 0;
}
.formgroup input[type="radio"] {
  display: none;
}
input[type="radio"],
label {
  color: brown;
  font-family: Arial, sans-serif;
  font-size: 14px;
}
input[type="radio"],
label span {
  display: inline-block;
  width: 19px;
  height: 19px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
input[type="radio"],
label span {
  background-color: brown;
}
input[type="radio"]:checked ~ span {
     background-color:orange;
}
input[type="radio"] + span,
input[type="radio"]:checked span {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}
<div class="main">
  <section class="artistpage">
    <div class="search">
      <h1>Artist Directory</h1> 
    </div>
    <ul class="artistlist">
      <li class="artist cf">
        <div class="info">
          <label class="formgroup">
            <input type="radio">
            <span></span>Op1
          </label>
          <label class="formgroup">
            <input type="radio">
            <span></span>Op2
            <span></span>Op2.1
            <span></span>Op2.2
            <span></span>Op2.3
          </label>

        </div>
      </li>
    </ul>
</div>

Upvotes: 3

Madhu G Nadig
Madhu G Nadig

Reputation: 122

Your radio button group isn't really the way it is supposed to be. I would suggest you alter that.

<ul class="artistlist">
  <li class="artist cf">
    <div class="info">
      <label class="formgroup">
        <input type="radio" name = "op"><span></span>Op1
        <input type="radio" name = "op"><span></span>Op2
        <input type="radio" name = "op"><span></span>Op3
      </label>
    </div>
  </li>
</ul>

Upvotes: 2

Related Questions