Select a container of a radio button list when a button gets selected

Question

I have several containers with radio buttons. I want a container of a selected radio button to become selected:

input[type="radio"]:checked+.container {
  border: 5px solid red;
}

<div class="container">
  <input class="btn-radio" type="radio" value="123" name="rd" />
</div>


<div class="container">
  <input class="btn-radio" type="radio" value="1234" name="rd" />
</div>


<div class="container">
  <input class="btn-radio" type="radio" value="12345" name="rd" />
</div>

Why doesn't it work?

This might help you https://stackoverflow.com/questions/43589287/change-border-color-of-radio-button-when-selected — Naomi, Jun 10 '18 at 14:01
actually your are selecting and element with class `.container` immediate next to `input` but in your html its the parent element. you might want to use additional element next to input and can use `+` for selecting it and add your style accordingly. :) — MJN, Jun 10 '18 at 14:22
in css you can't select bt you can do with jQuery or JavaScript add active class on container when input is checked — MJN, Jun 10 '18 at 18:45

score 2 · Answer 1 · edited Jun 11 '18 at 06:42

Here is the working code which I commented above

input[type="radio"]:checked + .border {
    border: 5px solid red;
}

.container {
    position: relative;
    max-width: 100px;
    margin: 10px;
}

input {
    position: relative;
    z-index: 100;
}

.border {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

<div class="container">
    <input class="btn-radio" type="radio" value="123" name="rd" />Input 1
    <div class="border"></div>
</div>
<div class="container">
    <input class="btn-radio" type="radio" value="1234" name="rd" />Input 2
    <div class="border"></div>
</div>
<div class="container">
   <input class="btn-radio" type="radio" value="12345" name="rd" /> Input 3
     <div class="border"></div>
</div>

I don't have `
` inside container and don't want to have it – Ojman Jun 10 '18 at 15:37 — Ojman, Jun 10 '18 at 15:37

score 1 · Answer 2 · answered Jun 12 '18 at 11:58

Here is a solution without new elements, you can use the ::before of the input to make the border on the container. Good Luck!

.container {
  position: relative;
  margin-bottom: 2em;
}

input[type="radio"]:checked::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 5px solid red;
}

    <div class="container">
      <p>container 123</p>
      <input class="btn-radio" type="radio" value="123" name="rd" />
    </div>


    <div class="container">
    <p>container 1234</p>
      <input class="btn-radio" type="radio" value="1234" name="rd" />
    </div>


    <div class="container">
    <p>container 12345</p>
      <input class="btn-radio" type="radio" value="12345" name="rd" />
    </div>

score 0 · Answer 3 · edited Jun 10 '18 at 14:55

0

Use id insted of that. Give them individual id.

#id:checked + .container {
    border: 5px solid red;;
}

For better result use the id for container as well.

edited Jun 10 '18 at 14:55

Ivan

34,531
8
55
100

answered Jun 10 '18 at 13:15

Rajat Jain

1,339
2
16
29

Select a container of a radio button list when a button gets selected

3 Answers3