'input type="radio" - only choose second option?

I have an issue with my radio input. It lets me change to the second option if im clicking on the label but it doesnt work for the first option. I can only choose the first option if im clicking on the selection-circle but i dont want to display it. It should work with a click on the text. Any ideas?

.switch-field {
  display: flex;
  margin-bottom: 36px;
  overflow: hidden;
  justify-content: center;
}

.switch-field input {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  height: 100px;
  width: 100px;
  border: 1px;
  /* overflow: hidden; */
}

.switch-field label {
  background-color: #e4e4e4;
  color: rgba(0, 0, 0, 0.6);
  font-size: 14px;
  line-height: 1;
  text-align: center;
  padding: 8px 10%;
  margin-right: -1px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.1s ease-in-out;
}

.switch-field label:hover {
  cursor: pointer;
}

.switch-field input:checked+label {
  background-color: #cc7676;
  box-shadow: none;
}

.switch-field label:first-of-type {
  border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
  border-radius: 0 4px 4px 0;
}
<div class="switch-field">
  <input type="radio" id="strang1u3" name="switch-one" onchange="speichern(); clicksound()" />
  <label for="strang1u2">Strang 1 & 3</label>
  <input type="radio" id="strang2u4" name="switch-one" onchange="speichern(); clicksound()" />
  <label for="strang2u4">Strang 2 & 4</label>
</div>
htmlcssinputradio


Solution 1:[1]

Your first label's for (strang1u2) and input's id (strang1u3) don't match. This may be causing this as the label isn't associated with the input.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions