Как изменить стиль ввода флажка, чтобы пользователь нажимал на ярлык, а не на само поле? - PullRequest
Новая
       26

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

0 голосов
/ 12 июня 2018

Я создаю проект с использованием HTML и CSS, и я хочу иметь параметры, которые можно выбрать с помощью флажка ввода.Тем не менее, я хочу изменить стиль, чтобы фактическое поле было скрыто, а текст метки можно было нажать, чтобы указать выбор.Я могу скрыть поле, опустив его непрозрачность до нуля, но я изо всех сил стараюсь переместить невидимое поле поверх текста так, чтобы казалось, что текст касается постукивания, а не окна.В конечном итоге это будет частью приложения для iOS.

Вот что у меня есть: Текущий вид с видимыми полями и Текущий вид со скрытыми полями

Мне нужен внешний вид скрытых прямоугольников, но для изменения цвета фона пользователь должен нажать слева от текста (где находится невидимое поле).

Вот HTML-код:

<div class="full-input preferences">
  <input type="checkbox" name="sports" value="Sports" class="preference"><label for="sports">Sports</label>
  <input type="checkbox" name="pets" value="Pets" class="preference"><label for="pets">Pets</label>
  <input type="checkbox" name="movies" value="Movies" class="preference"><label for="movies">Movies</label>
  <input type="checkbox" name="food" value="Food" class="preference"><label for="food">Food</label>
</div>

И CSS: 

.preferences {
  display: flex;
  flex-wrap: wrap;
  flex: 2;
}

.preference {
  margin: 0 .5em;
}

input[type=checkbox] {
  opacity: 0;
}

input[type=checkbox] + label {
  border: 1px solid #38A3B8;
  padding: .3em;
  border-radius: 5px;
  min-width: 3em;
  text-align: center;
  z-index: 1;
}

input[type=checkbox]:checked + label {
    background: #38A3B8;
    color: white;
}

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

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

, но для изменения цвета фона пользователь должен нажать слева от текста (где находится невидимое поле)

Ну, это потому, что вы не правильно связывает метки с полями ввода… 

<input type="checkbox" name="sports" value="Sports" class="preference">
<label for="sports">Sports</label>

Атрибут for должен ссылаться на ID поля ввода, оставляя только имя здесь недостаточно. 

<input type="checkbox" id="sports" name="sports" value="Sports" class="preference">
<label for="sports">Sports</label>

Таким образом, метка правильно связана с полем ввода, так что нажатие на текст метки теперь переключит статус флажка.

0 голосов
/ 12 июня 2018

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

input[type=checkbox] {
  opacity: 0;
  padding-right: 10px (or whichever size that fits);
}

Надеемся, этот ответ помог вам решить проблему (каким-либо образом).
Большое спасибо.

...