I tried to select parent element which is the wrapper of my radio button input.
I want to make the wrapper that have background colour using :focus-within if the radio button selected.
But seems it didn’t work. What’s wrong with css code?
.custom-radios div.wrapper {
display: block;
background-color: #F8FBFE;
max-width: 400px;
}
.custom-radios div.wrapper:focus-within input[type=radio]:checked {
background-color: #4199D5;
}<div class="custom-radios">
<div class='wrapper'>
<input type="radio" id="color-1" name="color" value="color-1">
<label for="color-1">
<span class="radio-check-icon">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
</span>
<div class='radio-value'>
<div class='radio-label'>
<img class='radio-image'
src="https://raw.githubusercontent.com/flyingduck92/svgs-collection/main/drinks-logos/sprite.svg"/zzz>
<p>Green</p>
</div>
<div class='radio-info'>
<div>
<small>Limit</small>
<p>Rp. 5.000.000</p>
</div>
<div>
<small>Fee</small><br>
<p>1.1%</p>
</div>
<div>
<small>Tenor</small><br>
<p>7 Days</p>
</div>
</div>
</div>
</label>
</div>
2
Answers
Try using
:has:So, if I am getting this correctly, you want the wrapper background to change if the radio button is checked, but only as long as the radio button inside the wrapper actually has the focus, i.e. after clicking somewhere else on the site, the background should revert back, even though the radio button is still checked?
You can work around the need for
:has(), if you put the radio button before the wrapper, and then use the next sibling combinator,+.:focus-withinwill not apply to the wrapper any more, since the radio button was taken out of it – but it is still within.custom-radios, so we can apply our "focus demand" on that one: