Whole input block in survey form

How am I supposed to make radio/checkboxes input like this? I’d like to select the option by clicking anywhere within the box, not only on the label text. Is it made by or would achieve by some CSS settings ?

If you use HTML label tag you get the desired effect.

Still don’t know how to do it. By using I can only choose the option by clicking on the text. But what I’m trying to figure out is how to cover the and in a box, so I can click anywhere in that box (including the blank area) to choose the option. And do I really need a box to achieve the effect I want?

I think so the easiest way to get the above effect using javascript.
I created a container element around the area. And added a little style and a click event. The important is the container. Inside the container you can use any layout what you want. (I used float left example but grid or flexbox maybe more better.)

<!DOCTYPE html>
	#container {
    	border: 1px solid brown;
        color: brown;
        width: 200px;
        background-color: beige;

    #container:hover {
    	border: 1px solid SaddleBrown;
        color: white;
        background-color: SaddleBrown;
    #male {
    	display: block;
        float: left;

<h1>The label element</h1>

<p>Click on one of the text labels to toggle the related radio button:</p>

<form action="/action_page.php">
<div id="container">
  <label id="#male" for="male">Male</label>
  <input type="radio" name="gender" id="male" value="male">
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
document.getElementById("container").addEventListener("click", () => {
	document.getElementsByTagName("input")[0].checked = true;

edit: I also added a hover effect

Oh, I see. This would work. Thanks!