0

The code from this answer works, but there is dead zone between the input radio and its label where clicking does not work. Even the cursor looks different. Basically they work as if they are two different things, not a single unit like a WinForms' RadioButton.

    <input type="radio" name="group1" id="r1" value="1" title="click me" />
    <label for="r1"  title="click me"> button one</label>

Also, I want to show a tooltip (title), but it seems that I have to put the same tooltip to both the radio input and the label, and the tooltip disappears on that dead zone.

What is the best way to make the two look like a single unit?

  1. Clicking anywhere starting from the circle to the end of label should work.
  2. A single tooltip needs to be shown anywhere starting from the circle to the end of label.
Damn Vegetables
  • 11,484
  • 13
  • 80
  • 135

1 Answers1

1

The label element can actually wrap your input and text to accomplish this.

<label for="r1"  title="click me">
  <input type="radio" name="group1" id="r1" value="1" title="click me" /> button one
</label>

This will cover your mouse events (hover/click) spanning from the start of the radio button to the end of the label text

Deryck
  • 7,608
  • 2
  • 24
  • 43
  • Thanks. It works, but is this standard? If so, why did the answer in the linked question recommend that way instead of this? – Damn Vegetables Nov 24 '19 at 07:15
  • Yes this is standard. As far as why someone answered like that, no idea. The way they answered isn't **incorrect** and sometimes you don't want them to be nested (like when you're using psuedo-selectors to style). Hope this helps – Deryck Nov 24 '19 at 07:22