How to change position of input parent div with radio button?

Question

In a container, two radio button inputs are placed. When the static button is checked, the containing div should be positioned static, when the absolute button is checked, the container should be positioned absolute. How to accomplish this JavaScript-free? Do I need additional markup?

div.container { border: 1px solid black; }

div.container input[id="static"]:checked + label {
    background-color: aqua;
}

div.container input[id="absolute"]:checked + label {
    background-color: green;
}

        <div class="container">
            <input id="static" type="radio" name="position" checked />
            <label for="static">Static</label>

            <input id="absolute" type="radio" name="position" />
            <label for="absolute">Absolute</label>
        </div>

I think to style parent you must use javascript/jquery – לבני מלכה Aug 12 '18 at 10:36 — לבני מלכה, Aug 12 '18 at 10:36

score 0 · Answer 1 · answered Aug 12 '18 at 10:40

Use onchange to change container style

function changePosition(pos){
var cont = document.getElementsByClassName("container")[0];
cont.style.position=pos;
}

div.container { border: 1px solid black; }

div.container input[id="static"]:checked + label {
    background-color: aqua;
}

div.container input[id="absolute"]:checked + label {
    background-color: green;
}

<div class="container">
  <input id="static" type="radio" name="position" checked onchange="changePosition('static')" />
   <label for="static">Static</label>

   <input id="absolute" type="radio" name="position" onchange="changePosition('absolute')"/>
   <label for="absolute">Absolute</label>
</div>

How to change position of input parent div with radio button?

1 Answers1