Не работает :focus для input

Question

Не работает input:focus

<div class="basket-data__input">
<div class="cabinet-data__text basket-data-text">Ваше имя</div> <input
class="basket-data-input" type="text" tabindex="0" placeholder="Ваше имя*">
</div>
<div class="basket-data__input">
<div class="cabinet-data__text basket-data-text">Ваше имя</div><input tabindex="1"
type="text" placeholder="Номер телефона*">
</div>
<div class="basket-data__input">
<div class="cabinet-data__text basket-data-text">Ваше имя</div><input tabindex="2"
type="text" placeholder="Электронная почта*"></div>

.basket-data__input {
   position: relative;
}
.basket-data-input:focus .basket-data-text {
   visibility: visible;
   opacity: 1;
}
.basket-data-text {
   visibility: hidden;
   transition: 0.3s;
   opacity: 0;
}

Пробовал через + тоже не работает, может кто знает в чем дело?

Answer 1

Как правильно заметил @andreymal в комментариях,

селектор .basket-data-input:focus .basket-data-text означает, что внутри элемента с классом basket-data-input должен быть элемент с классом basket-data-text.

Вы пробовали использовать селектор +, но он тоже не работает, потому что выбирает элемент соседний, который следует после первого. (http://htmlbook.ru/css/selector/adjacent)

Для того, чтобы селектор + в нашем случае заработал, необходимо поменять элементы местами в html:

  <input id="name" class="basket-data-input" type="text" tabindex="0" placeholder="Ваше имя*">
  <label class="cabinet-data__text basket-data-text" for="name">Ваше имя</label>

А стилями уже подвинем на нужное место. Например это можно следать так:

.basket-data__input {
  position: relative;
  padding-top: 20px;
}

.basket-data-input:focus+.basket-data-text {
  visibility: visible;
  opacity: 1;
}

.basket-data-text {
  visibility: hidden;
  opacity: 0;
  transition: 0.3s;
  position: absolute;
  left: 0;
  top: 0;
}

<div class="basket-data__input">
  <input id="name" class="basket-data-input" type="text" tabindex="0" placeholder="Ваше имя*">
  <label class="cabinet-data__text basket-data-text" for="name">Ваше имя</label>
</div>

Ещё советую почитать про тег <label>, он как раз нужен для добавления подписей к элементам таблиц: https://developer.mozilla.org/ru/docs/Web/HTML/Element/label

БЛОГ НА HUSL

Не работает :focus для input

Ответы (1 шт):