CODEWITHSUNDEEP
htmlcssforms
Staffan Estberg
Staffan Estberg

Reputation: 7035

Hover state for label with nested span and input

I'm trying to run a hover state for a specific label (not all) that forms a custom radio button by nesting an input field and a span element, like so -

<label>
    <input id="sample" name="sample" type="radio" value="sample">
    <span></span>
    Sample
</label>

The hover state should be that of a cursor pointer change. How would I go about to achieve this? Right now only the span (which is a custom radio button design) gets a pointer cursor. If the user hovers the label text nothing happens.

Upvotes: 0

Views: 634

Answers (1)

David Wilkinson
David Wilkinson

Reputation: 5118

Why not wrap the text in em, i, etc tags and style with cursor: pointer?

label em {
  cursor: pointer;
  font-style: normal;
  }
<label>
    <input id="sample" name="sample" type="radio" value="sample">
    <span></span>
    <em>Sample</em>
</label>

EDIT - further to comments below, please see the following:

label, label *:not(input) {
  cursor: pointer;
  font-style: normal;
  }
<label>
    <input id="sample" name="sample" type="radio" value="sample">
    <span></span>
    Sample
</label>

Since you can't select actual text nodes with CSS (i.e. - "Sample" in your example), we can use CSS to style the label as a whole and its descendants, but with the exception of the input (:not(input))

Upvotes: 1

Related Questions