Making the clickable area of a radio button bigger

Hello! I found this code to make my radio buttons deselect or to uncheck if you click on it again. However, I’m having the issue of only being able to deselect if you click on the radio button specifically. I would like to make it so that clicking on the label again will deselect the option. Clicking it normally works how I want, but unselecting gives me an issue with this. How can I fix this? Not sure if it makes a difference but my buttons are formatted in a table. Thank you!


Here is how I created my radio buttons

<label>
        <input type="radio" value="markTwain" name="candidate">  <span>Mark Twain</span></label>

Here is how the radio buttons can be unselected

window.onload = function() {
  document.querySelectorAll("INPUT[type='radio']").forEach(function(rd) {
    rd.addEventListener("mousedown", function() {
      if(this.checked) {
        this.onclick=function() {
          this.checked=false
        }
      } else {
        this.onclick=null
      }
    })
  })
}

Here is how I’ve modified the radio buttons.

label {
    display: block; 
    padding: 10px 8px;
    cursor: pointer;
  border-bottom: 1px solid black;
}


label span {
    position: relative; 
    line-height: 22px;
    font-size: 22px;

}

input[type='radio'] {
  height: 20px;
  width: 20px;
  position: relative;
}

input[type='radio'] ::after{
  content:"";
  width: 16px;
    height: 8px;
    position: absolute;
    top: 2px; 
    left: 4px; 
}

To make the clicking area of the radio button bigger, all you have to do is modify the code in the input[type='radio'] CSS class.

The code will look like this:

input[type='radio'] {
height: 50px;
width: 50px;
position: relative;
}

I hope this helped.

@ShaunMostert doesn’t that just make the radios bigger?

Yeah, isn’t that what they wanted? As the title said and that is what I understood from the description.

No? They wanted that the radio gets unselected when they click on the label. They also literally specified “clickable area” in the title.

1 Like

I tested this code myself, the JavaScript code does not allow you to un-select the radio.

1 Like

Hi! Unfortunately the radio buttons are no longer being unselected, but I will keep playing around with this code to see if I make it work. Thank you!