Используя только HTML и CSS, как я могу использовать «проверенный» статус переключателя для отображения / скрытия полей условной формы? - PullRequest
Новая
       16

Используя только HTML и CSS, как я могу использовать «проверенный» статус переключателя для отображения / скрытия полей условной формы?

0 голосов
/ 30 марта 2020

У меня это работает для флажка. Когда я устанавливаю флажок, появляются две мои радио кнопки. Но теперь, если я выберу одну из переключателей, я хочу, чтобы появился блок адресных полей. Я не уверен, почему то же самое, что работает для флажка, не работает для переключателя. 

<form>
  <input class="no22XAddressRadioButtons_activator" type="checkbox">
  Check if you do not have a physical address within the Oakland Beat 22X boundary.

  <div class="no22XAddressRadioButtons">

    <input class="outsideAddress_activator" type="radio" name="no22XAddress" id="outsideAddress_activator">
    <label for="outsideAddress_activator">My physical address is outside of the 22X boundary.</label><br>

    <input class="noAddress" type="radio" name="no22XAddress" id="no22XAddress">
    <label for="no22XAddress">I don't have a physical address.</label><br>

  </div>

  <!--Begin conditional address-->

  <div class="outsideAddressTextFields">

    Enter your physical address including city, state, and zip code.

    <input class="outsideAddress" type="text">

    <label class="labelText" for="outsideAddress">Number and Street</label>
    <input type="text" name="outsideAddress" id="outsideAddress" required>

  </div>

</form>

/* Begin conditional radio buttons */

.no22XAddressRadioButtons {
  display: none;
}
.no22XAddressRadioButtons_activator {
  margin-left: 30px;
}
.no22XAddressRadioButtons_activator:checked + .no22XAddressRadioButtons {
  display: block;
  margin-left: 45px;
}


/* Begin conditional address */

.outsideAddressTextFields{
  display: none;
}
.outsideAddress_activator:checked + .outsideAddressTextFields {
  display: block;
}

1 Ответ

0 голосов
/ 30 марта 2020

Это потому, что вы используете +, соседний братский комбинатор . Это означает, что блок, который вам нужно сделать видимым, в то время как вход проверен, должен быть сразу после указанного входа. Вы можете использовать Общий братский комбинатор , который, я думаю, может быть полезен в вашем случае. Я приложил измененный фрагмент кода для демонстрации.

В качестве примечания: используйте метки , чтобы связать ввод с заголовком.

Вы можете нажать соответствующая метка для фокусировки / активации входа, а также самого входа. Эта увеличенная область попадания дает преимущество всем, кто пытается активировать ввод, в том числе тем, кто использует устройство с сенсорным экраном. 

/* Begin conditional radio buttons */

.no22XAddressRadioButtons {
  display: none;
}
.no22XAddressRadioButtons_activator {
  margin-left: 30px;
}
.no22XAddressRadioButtons_activator:checked ~ .no22XAddressRadioButtons {
  display: block;
  margin-left: 45px;
}


/* Begin conditional address */

.outsideAddressTextFields{
  display: none;
}
.outsideAddress_activator:checked ~ .outsideAddressTextFields {
  display: block;
}
<form>
   <input id="addressCheck" class="no22XAddressRadioButtons_activator" type="checkbox">
   <label for="addressCheck">Check if you do not have a physical address within the Oakland Beat 22X boundary.</label>

   <div class="no22XAddressRadioButtons">

      <div>
         <input class="outsideAddress_activator" type="radio" name="no22XAddress" id="outsideAddress_activator">
         <label for="outsideAddress_activator">My physical address is outside of the 22X boundary.</label>
         <!--Begin conditional address-->

         <div class="outsideAddressTextFields">
            <div>
               <label for="insideAddress">Enter your physical address including city, state, and zip code.</label>
               <input class="outsideAddress" type="text" id="insideAddress">
            </div>

            <div>
               <label class="labelText" for="outsideAddress">Number and Street</label>
               <input type="text" name="outsideAddress" id="outsideAddress" required>
            </div>
         </div>
      </div>

      <div>
         <input class="noAddress" type="radio" name="no22XAddress" id="no22XAddress">
         <label for="no22XAddress">I don't have a physical address.</label><br>
      </div>
   </div>

</form>
...