title: How to prevent radio buttons being selected by clicking their labels
body: <p>I have a group of radio buttons which each have their own labels. The label width is set to auto, which is what I want because the text length could increase in the future.</p>
  
  <p>At the moment if I click the label it will select the corresponding radio button. As I understand it, this is default HTML behaviour. Is there any simple (by simple I mean preferably without using Javascript) way to suppress this default behaviour? So that I can select the radio button only by clicking the grey circle itself?</p>
  
  <p><a href="https://i.stack.imgur.com/cq5ol.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cq5ol.png" alt="Radio button wrapped in Label"></a></p>