Как доза регистрируется событие клика, когда вы не нажимаете кнопку-флажок или не используете JavaScript?

Question

Итак, я работаю над пользовательским флажком и использую пример из W3Schools .
Что я не могу понять, так это как регистрируется событие нажатия, когда мы не нажимаемфлажок?
Как видно на рисунке ниже, поле ввода находится справа от текста метки.

ОБНОВЛЕНИЕ
Поэтому, когда флажок находится внутри метки, происходит какое-то волшебство. Но я не хочу, чтобы ярлык был кликабельным, и мне нужно иметь возможность перемещать флажок влево и вправо от ярлыка. Таким образом, проверяя предложение Томаса, я использовал ID и FOR и переместил флажок за пределы метки. Но это не работает.

https://jsfiddle.net/sstieng/r5y9jqgn/8/

HTML

<label class="container">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>

CSS

/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

Answer 1

Это потому, что контейнер не имеет определенной ширины и покрывает всю следующую часть, поэтому, если вы измените свой контейнер css на:

/* The container */
.container {
  display: block;
  width:0px;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

<h1>Custom Checkboxes</h1>
<label class="container">One
  <input type="checkbox" checked="checked">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="checkbox">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="checkbox">
  <span class="checkmark"></span>
</label>

Теперь он не выбирается снаружи из контейнера

Примечание: Метка также включена в checkBox, поэтому она получаетвыбрав, нажав на нее