CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dimeba
Dimeba

Reputation: 13

CSS - radio button style change when not selected

Is it possible to change the style of a radio button that has not been selected after the other button has been selected?

So, for example when the page is loaded, the background of radio buttons is black.

When i click Option 1, its background becomes green.

I want Option 2 background also to change to red when i click Option 1.

Sorry if the question is confusing and much thanks!!

input {
  background-color: black;
}

input:checked {
  background-color: green;
}
<div>
  <input type="radio" name="example">
  <label>Option1</label>
</div>

<div>
  <input type="radio" name="example">
  <label>Option2</label>
</div>

Upvotes: 0

Views: 2280

Answers (3)

Shashidhara
Shashidhara

Reputation: 683

You have to do something like this..

$(".radioElement").change(function(){
   $(".input").addClass("inputSelectedRemoved");
   if($(this).is(':checked')){
    $(this).parent().addClass("inputSelected");
    $(this).parent().removeClass("inputSelectedRemoved");
   }   
});
.input {
    background-color: black;
    color:white;
    }

.inputSelected{
    background-color: green;
    color:white;
}

.inputSelectedRemoved{
    background-color: red;
    color:white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input">
    <input type="radio" name="example" value="Option 1" class="radioElement">
    <label>Option1</label>
    </div>

    <div class="input">
    <input type="radio" name="example" value="Option 2" class="radioElement">
    <label>Option2</label>
    </div>

Upvotes: 1

Itay Gal
Itay Gal

Reputation: 10834

Just for fun, to show it can be done with CSS only, this example will work, but I really don't recommend doing it, just use one of the solutions with JS.

Since you can access the next sibling with + or further next sibling with ~ you can locate all your radio button elements first, then your labels after, this way you'll be able to access the labels as "next sibling".

With CSS you can locate the labels on the right place and even give it a background that covers the radio buttons:

.container{
  position: relative;
  display: flex;
  flex-direction: column;
}

.container div{
  width: 200px;
  padding-left: 30px;
  z-index: -1;
}

#in1:checked ~ #txt1{
  background-color: green;
}

#in1:checked ~ #txt2{
  background-color: red;
}


#in2:checked ~ #txt2{
  background-color: green;
}

#in2:checked ~ #txt1{
  background-color: red;
}

.container div{
  background-color: black;
  color: white;
}

#txt1 {
  position: absolute;
  left: 0;
  top: 0;
}

#txt2 {
  position: absolute;
  left: 0;
  top: 1em;
}
<div class="container">
  <input id="in1" type="radio" name="example">
  <input id="in2" type="radio" name="example">
  <div id="txt1">Option 1</div>
  <div id="txt2">Option 2</div>
</div>

Upvotes: 1

Computings
Computings

Reputation: 119

I think it is like this: I added an onclick attribute

    <div>
    <input type="radio" name="example" onclick="document.body.style.backgroundColor = 'green'">
    <label>Option1</label>
    </div>

    <div>
    <input type="radio" name="example" onclick="document.body.style.backgroundColor = 'red'">
    <label>Option2</label>
    </div>

I hope this helps

Upvotes: -1

Related Questions