Подсветка для элемента ввода текста в стиле TripAdvisor с помощью CSS

Подсветка для элемента ввода текста в стиле TripAdvisor с помощью CSS

От автора: я недавно попросил дизайнера создать стиль для элемента ввода текста, похожий на панель поиска в TripAdvisor. Мне он очень понравился. И теперь я хочу поделиться готовым решением в виде пошагового руководства, чтобы вы могли создать его самостоятельно.

Подсветка для элемента ввода текста в стиле TripAdvisor с помощью CSS

В данном случае для реализации стиля подсветка текста CSS недостаточно, поэтому мы будем использовать еще и JavaScript. Так что, я исхожу из того, что у вас есть базовые знания по SCSS и React. Вот полный код на CodePen:

Давайте создадим это!

Сначала мы создадим простой компонент React и перенесем его в DOM:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Добавим к нему CSS:

Добавим HTML-контейнер для ReactDOM, чтобы отобразить его:

В результате мы получим базовый элемент ввода с нижней границей.

Подсветка для элемента ввода текста в стиле TripAdvisor с помощью CSS

Теперь давайте оживим границу!

Трудность с реализацией подсветки заключается в том, что она должна изменять границу на уровне с вводимым текстом. Она также должна работать с любыми font-family и font-size.

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

Предположим, мы можем использовать второй элемент с динамической шириной — в нашем примере это будет элемент span с классом input-highlight. Затем мы скопируем вводимый текст и поместим его внутри span. Я задал контролируемый ввод текста, предоставив свойство value. Теперь наш компонент React выглядит следующим образом:

Добавьте следующие правила CSS для input-highlight. Примечание: здесь мы используем переменные SCSS, чтобы свойство font имело одинаковые значения для input и для span:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

И мы получим следующее:

Подсветка для элемента ввода текста в стиле TripAdvisor с помощью CSS

Затем добавим верхнюю границу для span и расположим ее так, чтобы эта граница накладывалась на нижнюю границу input. Кроме того, поскольку для input-highlight теперь задано position: absolute, для родительского элемента нам нужно задать правило position: relative.

Подсветка для элемента ввода текста в стиле TripAdvisor с помощью CSS

Элемент span заканчивается там, где заканчивается текст. Это делает его идеальной мерой длины вводимого текста! Теперь, легкая часть: давайте используем JavaScript для обновления текста в элементе span при каждом изменении вводимого содержимого. Мы будем использовать state React, чтобы одновременно обновлять значение как input, так и span. Вот наш обновленный компонент:

Часть .replace(/ /g, «\u00a0″) необходима для того, чтобы React правильно обрабатывал пробелы. Затем мы скроем span, добавив следующие строки в селектор CSS input-highlight:

Нам нужно overflow: hidden для span, чтобы ограничить высоту контейнера (иначе это приведет к растяжению контейнера по горизонтали — спасибо Prasanna и Andrea за то, что они указали это в комментариях!)

Подсветка для элемента ввода текста в стиле TripAdvisor с помощью CSS

Подводя черту

Все уже работает довольно хорошо. Последнее штрих — мы добавим для подсветки другой onFocus цвет. Чтобы достичь этого, нам нужен способ задать для span стиль, который применяется, когда input выделен фокусом ввода. input и span — это элементы одного уровня, поэтому мы будем использовать селектор CSS +. Вот полный код для селектора input, включая селектор + для input-highlight:

Благодарю за внимание! Если вам понравился этот пост, поделитесь ссылкой со своими друзьями.

Автор: Petr Gazarov

Источник: https://medium.freecodecamp.org/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree