CSS атрибут, который описывает поведение спана при наличии текста в инпуте

Question

CSS атрибут, который описывает поведение спана при наличии текста в инпуте

Рейтинг: 0Ответов: 1Опубликовано: 21.07.2023

У меня на страничке есть небольшая формочка с полями ввода, где пользователь может вводить некоторые значения.

<div class="main__input">
    <input type="number" class="main__input-min" placeholder="0">
    <span class="main__input-text">Min </span>
</div>

Стиль для полей ввода я подглядел на сайте с коллекциями кнопок, чекбоксов, полей ввода и прочих. Ссылка на вариант инпута, который мне понравился. Суть в том, что с помощью чистого CSS у этого инпута реализован механизм, который мало того что при фокусе поднимает лейбл "Name" выше, так ещё и при наличии какого либо текста в нём продолжает держать лейбл наверху и это, повторюсь, на чистом css. Я использую вместо в примере, но я надеюсь проблема не в этом. Я уже голову сломал с этими стилями, не получается у меня повторить стили с примера с сайта таким образом, чтобы и у меня при наличии текста в поле ввода текст не опускался, хотя в фокусе - всё работает как и задумано (но и реализуется :focus очень просто).

Резюмируя вопрос - Какие задать стили для поля ввода , чтобы И при фокусе на нём И если оно не пустое, соседний тег висел наверху и не опускался на поле ввода

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

P.S. У меня есть предположение, что это реализовано как-то через :placeholder-shown, но я сталкиваюсь с таким псевдоклассом впервые и реализовать его не получилось, хотя стили я себе все применил

css html input html-form

Источник: Stack Overflow на русском

Answer 1

▲ 3Принят

Вот небольшой пример использования псевдо-аттрибута :placeholder-shown стили можно настроить уже по вкусу. В совокупности с :not мы получаем элемент у которого не отображается плейсхолдер т.е. произведен ввод данных.

.main__input-min:not(:placeholder-shown) ~ span{
   color:red;
   position: absolute;
   top: 35px;
   left: 10px;
}

<div class="main__input">
    <input type="number" class="main__input-min" placeholder="0">
    <span class="main__input-text">Min </span>
</div>

CSS атрибут, который описывает поведение спана при наличии текста в инпуте

Ответы