Підсвічування для елемента вводу тексту в стилі TripAdvisor з допомогою CSS

18

Від автора: я нещодавно попросив дизайнера створити стиль елемента вводу тексту, схожий на панель пошуку в TripAdvisor. Мені він дуже сподобався. І тепер я хочу поділитися готовим рішенням у вигляді покрокового керівництва, щоб ви могли створити його самостійно.

Підсвічування для елемента вводу тексту в стилі TripAdvisor з допомогою CSS

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

Давайте створимо це!

Спочатку ми створимо простий компонент React і перенесемо його в DOM:

class App extends React.Component {
render() {
return (

);
}
}
ReactDOM.render(
,
document.getElementById(‘root’)
);

Додамо до нього CSS:

$input-font-size: 30px;
$input line-height: 70px;
$font-family: Roboto Slab, sans-serif;
body {
background-color: #222222;
}
.input-wrapper {
width: 500px;
margin: 50px auto;
}
input {
height: 60px;
width: 100%;
min-width: 100%;
padding: 0;
border-radius: 0;
line-height: $input line-height;
background-color: transparent;
color: white;
font-size: $input-font-size;
border: none;
outline: none;
border-bottom: 3px solid #333333;
font-family: $font-family;
}

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

В результаті ми отримаємо базовий елемент вводу з нижньою межею.

Підсвічування для елемента вводу тексту в стилі TripAdvisor з допомогою CSS

Тепер давайте оживимо кордон!

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

Оскільки ширина елемента вводу фіксована, нам потрібен інший прийом, щоб визначити, де закінчується текст в будь-який конкретний момент часу.

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

class App extends React.Component {
render() {
return (


basic input, bottom border

);
}
}

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

.input-highlight {
font-size: $input-font-size;
line-height: $input line-height;
font-family: $font-family;
max-width: 100%;
}

І ми отримаємо наступне:

Підсвічування для елемента вводу тексту в стилі TripAdvisor з допомогою CSS

Потім додамо верхню межу для span і розташувати її так, щоб ця межа накладалася на нижню межу input. Крім того, оскільки для input-highlight тепер задано position: absolute, для батьківського нам потрібно задати правило position: relative.

.input-highlight {
font-size: $input-font-size;
line-height: $input line-height;
font-family: $font-family;
max-width: 100%;
border-top: 3px solid white;
position: absolute;
left: 0;
bottom: 0;
height: 0;
}
.input-wrapper {
width: 500px;
margin: 50px auto;
position: relative;
}

Підсвічування для елемента вводу тексту в стилі TripAdvisor з допомогою CSS

Елемент span закінчується там, де закінчується текст. Це робить його ідеальною мірою довжини тексту, що вводиться! Тепер, легка частина: давайте використаємо JavaScript для оновлення тексту в елементі span при кожній зміні вводиться вмісту. Ми будемо використовувати state React, щоб одночасно оновлювати значення як input, так і span. Ось наш оновлений компонент:

class App extends React.Component {
constructor() {
super();
this.state = {
inputValue:»
};
this.onInputChange = this.onInputChange.bind(this);
}
onInputChange(e) {
const { value } = e.target;
this.setState({
inputValue: value
});
}
render() {
const { inputValue } = this.state;
return (


{ inputValue.replace(/ /g, «\u00a0») }

);
}
}

Частина .replace(/ /g, «\u00a0») необхідна для того, щоб React правильно обробляв прогалини. Потім ми приховаємо span, додавши наступні рядки в селектор CSS input-highlight:

color: transparent;
user-select: none;
overflow: hidden;

Нам потрібно overflow: hidden для span, щоб обмежити висоту контейнера (інакше це призведе до розтягування контейнера по горизонталі — спасибі Prasanna і Andrea за те, що вони вказали це в коментарях!)

Підсвічування для елемента вводу тексту в стилі TripAdvisor з допомогою CSS

Підводячи риску

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

input {
height: 60px;
width: 100%;
min-width: 100%;
padding: 0;
border-radius: 0;
line-height: $input line-height;
background-color: transparent;
color: white;
font-size: $input-font-size;
border: none;
outline: none;
border-bottom: 3px solid #333333;
font-family: $font-family;
&:focus {
+ .input-highlight {
border-top: 3px solid #fbc91b;
}
}
}

Дякую за увагу! Якщо вам сподобався цей пост, поділіться посиланням зі своїми друзями.