0

Is there a way to have a change in border color of parent element(label) when child element(input) is checked .

Is it possible with CSS

.OuterField {
  display: flex;
}

.listLabel {
  padding: 8px 5px;
  border: 2px solid black;
  width: 32%;
  margin: 1%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-flow: row;
}

input[type="radio"]:checked~label {
  border: 2px solid red;
  box-shadow: 0 0 0 3px orange;
}
<div class="OuterField">
    <label for="List1" class="listLabel">List 1
        <input type="radio" id="List1" name="list" value="List1">
     </label>
     <label for="List2" class="listLabel">List 2
         <input type="radio" id="List2" name="list" value="List2">
     </label>
</div>

Thanks for help in advance

TylerH
  • 20,799
  • 66
  • 75
  • 101
Rana
  • 2,500
  • 2
  • 7
  • 28
  • There's no parent or previous sibling selector yet, so you'd either need JS or to rearrange your elements so that the input came before the label. – j08691 Oct 22 '21 at 20:45
  • Probably not if it's a child, but are you able to change your HTML structure to make them siblings? – A Haworth Oct 22 '21 at 20:46
  • This seems to work: .listLabel:focus-within { border: 2px solid red; box-shadow: 0 0 0 3px orange; } You can find more information here: https://stackoverflow.com/questions/24287192/css-change-parent-on-focus-of-child – Davide Oct 22 '21 at 20:54
  • Hi, I didn't understand 'won't change the state of checkbox' - if you have control of the HTML then you can get the effect you want without JS. What you can't do is have the input as a child of the label and get the effect you want with just CSS. – A Haworth Oct 22 '21 at 20:56
  • @AHaworth I mean to say that , if I need to have same arrangement than have to reposition each one separately and have separate container – Rana Oct 22 '21 at 21:01
  • @AHaworth I question, hope you can help . I have lot of containers lot of to restyle part of document . Is it okay to have some extra container or does it have some drawbacks and try to reduce containers – Rana Oct 22 '21 at 21:07
  • Sorry, I don't understand what you are meaning. Does the question that has been pointed to solve your problem? – A Haworth Oct 22 '21 at 21:18
  • If it is very time consuming/complex to rearrange your input and label elements (the label would have to come after the input and you'd need to do some repositioning) then I think you might be better off using Javascript to note when the input is checked. JS can get hold of the parent element and style that e.g. by adding a class. – A Haworth Oct 23 '21 at 09:35
  • @AHaworth thank but as you said I tried some rearrangements and as said content might overlap over radio so added some padding . Can you see that it same as you might do have to use other things in `red btn` – Rana Oct 23 '21 at 09:53
  • It was getting too complex trying to describe the way I'd go about this in just comments so I have added my method to the question which has been pointed to as a duplicate. Please see https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector/69687536#69687536 and if you have questions about that put the comment on that rather than here. Thanks. – A Haworth Oct 23 '21 at 11:10
  • The proper solution cc @AHaworth is to just not have your label be a wrapper around the input. Make the label be a sibling element to the input that occurs after it. – TylerH Oct 25 '21 at 13:37
  • @TylerH so what can be a better approach – Rana Oct 25 '21 at 13:39
  • You can pad out the size of the label, position the radio buttons relative to the div wrapper and do something like this: https://jsfiddle.net/mjt14w5z/ – TylerH Oct 25 '21 at 13:56
  • @TylerH yes That would be one solution, and the one I would normally use (label after input) but I wanted to keep the formatting that was already there to make it simpler, hence introduction of an otherwise redundant span in my answer. – A Haworth Oct 26 '21 at 04:31
  • @AHaworth FWIW, Rana did join me in the HTML/CSS chat room and we discussed further variations as well (in case you are interested in the things discussed) – TylerH Oct 26 '21 at 13:15

0 Answers0