selecting input labels not in a <label> tag in CSS

Question

I am trying to select basically the "label" of an input that is not enclosed in a label tag. I would like to style the values of radio button options in an HTML form. For example:

<!DOCTYPE html>
<html>
<body>

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other  
</form> 

</body>
</html>

In the above example, how would I select the "Male", "Female" and "Other" labels beside each button to style in CSS?

Thanks!

It is not possible with CSS alone you'll have to use JavaScript or jQuery for that. — Dan Philip

Allison Allison · Accepted Answer · 2018-01-03T21:21:44

You could wrap the label in <span> or <div> rather than a <lable>. The way that it is currently laid out doesn't have any tags. Without a selector, you have nothing to point to in the CSS.

CSS Syntax and Selectors

selecting input labels not in a <label> tag in CSS

1 Answers