css selector for text after checked input

Question

I am trying make the text after input bold if input is checked but I am failing. I think my is not finding the text. I appreciate any help or hint.

input[type="radio"]:checked+ {
  font-weight: bold;
}

<label for="radio-foobar">
  <input type="radio" id="radio-3" value="3" />
  Hello world!
</label>

as far as i know you cant select parent label with css. You will have to use js — Void Spirit, Oct 20 '20 at 14:49
i dont know why this question was closed. This question is about radio with parent label not about radio then label situation. — Void Spirit, Oct 20 '20 at 14:53

Temani Afif · Accepted Answer · 2020-10-20T14:52:53.707

3

focus-within and a transition hack can approximate this. The transition is to make sure the style is kept even if you click outside.

label {
  font-weight: 400;
  transition:0s 999s;
}

label:focus-within {
  font-weight: 900;
  transition:0s;
}

<label for="radio-3">
  <input type="radio" id="radio-3" value="3" >
  Hello world!
</label>

edited Oct 20 '20 at 14:52

answered Oct 20 '20 at 14:49

Temani Afif

180,975
14
166
216

I can use scss. Is there a cleaner solution using scss? – Node.JS Oct 20 '20 at 14:51
But this doesnt work on clicking the text right? usually radio button will be checked even if we click on the text. Just curious to know :) – Hema Nandagopal Oct 20 '20 at 14:51
1

@Node.JS the cleaner solution is to change the HTML structure – Temani Afif Oct 20 '20 at 14:52
@HemaNandagopal it does work, the for attribute wasn't correct – Temani Afif Oct 20 '20 at 14:53

score 0 · Answer 2 · answered Oct 20 '20 at 14:44

0

On html, it is needed to cover Hello World! into html tag like <span> and on CSS you can select that span next to checked input using + CSS selector.

input[type="radio"]:checked + span {
  font-weight: bold;
}

<label for="radio-foobar">
  <input type="radio" id="radio-3" value="3" />
  <span>Hello world!</span>
</label>

answered Oct 20 '20 at 14:44

Derek Wang

9,675
4
14
36

1

I cannot change the structure and add a `span` – Node.JS Oct 20 '20 at 14:44
Can you add label instead of span? – Hema Nandagopal Oct 20 '20 at 14:48
I cannot change the structure – Node.JS Oct 20 '20 at 14:50
Without changing the structure, it is impossible to change the parent style when child is checked. You need to use javascript for this. – Derek Wang Oct 20 '20 at 14:58

css selector for text after checked input

2 Answers2

Linked

Related