Стилізація текстових полів форми

У статті розглянемо різні варіанти стилізації текстових полів HTML-форм. Спочатку створимо базовий варіант оформлення input, а потім безліч інших, доповнюючи кожен із них невеликою кількістю CSS.

Вступ

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

Веб-форми також часто називають HTML-формами. Їх проектування здійснюється за допомогою елементів управління форм (текстових полів, списків, кнопок, чекбоксів і т.д.) і деяких додаткових елементів, які використовуються для надання формі певної структури.

Стилізація форми виконується через CSS. У цьому посібнику зупинимося і докладно розглянемо різні варіанти оформлення її текстових полів.

Вихідні коди прикладів розташовані на GitHub у папці text-field проекту "ui-components".

Нормалізація стилів

1. Налаштування box-sizing.

Зазвичай гарною практикою вважається для всіх елементів, включаючи псевдоелементи, встановити box-sizing: border-box :

*, *::before, *::after { box-sizing: border-box; }

У цьому випадку браузер при розрахуванні ширини та висоти елементів буде включати в них поля (padding) та межі (border). Як правило, це спрощує роботу з розмірами елементів, і позбавляє нас від багатьох проблем при розміщенні контенту.

2. Нормалізація стилів.

Для того щоб у різних браузерах відображався якомога однаково необхідно додати наступне:

/* 1 – Змінимо стилі шрифтів */ /* 2 – Видалимо margin у Firefox та Safari */ input[type="text"] { font-family: inherit; /* 1 */ font-size: inherit; /* 1 */ line-height: inherit; /* 1 */ margin: 0; /* 2 */ }

Базовий варіант оформлення input

Для зручного додавання до елементів стилів створимо наступну HTML-розмітку:

Тобто.додамо до з type="text" клас text-field__input , до – text-field__label , а потім обернемо їх в елемент із класом text-field .

Тепер напишемо стилі для цих елементів.

/* встановимо відступ 1rem від нижнього краю елемента */ .text-field { margin-bottom: } /* стилі для label */ .text-field__label { display: block; для input */ .text-field__input { display: block; width: 100%; calc(2.25rem + 2px); 0.375rem 0.75rem; ;background-clip: padding-box; border: 1px solid #bdbdbd; border-radius: 0.25rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s

Застосовані CSS властивості елемента , і те, що вони роблять:

display: block – встановлює блокове відображення;
width: 100% - займає всю доступну ширину;
height: calc(2.25rem + 2px) – висота елемента визначається шляхом додавання 2.25rem ( font-size * line-height + padding-top + padding-bottom ) та 2px (ширина верхньої та нижньої межі);
margin: 0 – прибирає margin відступи;
padding: 0.375rem 0.75rem – внутрішні поля: зверху та знизу – 0.375rem, а зліва та праворуч – 0.75rem;
font-family: inherit – щоб шрифт був такий як у батьківського елемента, а не той, який браузер за умовчанням призначає для ;
font-size: 1rem – встановлює явний розмір шрифту, інакше братиметься зі стилів браузера для ;
font-weight: 400 – задає зображення шрифту;
line-height: 1.5 - висота рядка (1.5 * розмір шрифту);
color: #212529 – колір шрифту;
background-color: #fff – колір тла;
background-clip: padding-box - вказує, що фон (фонове зображення) потрібно малювати тільки до зовнішнього краю відступу (під кордоном не виводити);
border: 1px solid #bdbdbd – встановлює межу, у якої: 1px (товщина), solid (тип лінії) та #bdbdbd (колір);
border-radius: 0.25rem – радіус заокруглення кутів;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out – змінює значення властивостей border-color та box-shadow з анімацією тривалістю 0.15 секунд за допомогою тимчасової функції ease-in-out .

В результаті отримали таке оформлення:

Стилізуємо плейсхолдер. За замовчуванням плейсхолдер відображається напівпрозорим або світло-сірим кольором. Отримати його можна за допомогою ::placeholder. Оформимо його так:

.text-field__input::placeholder { color: #212529; opacity: 0.4; }

Стилі для фокусу (отримати цей стан можна за допомогою псевдокласу :focus ):

.text-field__input:focus { color: #212529; background-color: #fff; border-color: #bdbdbd; outline: 0; box-shadow: 0 0 0 0.2rem rgba(158, 158, 158, 0.25); }

Оформлення , коли він може disabled і readonly :



Ім'я користувача (disabled)
Місто (readonly)

Цей набір стилів буде відправною точкою для створення інших.

input з іконкою

Розглянемо приклад вставки в іконки за допомогою псевдоелементів.

Для цього додатково обернемо елемент з класами text-field__icon text-field__icon_email :

Перший клас (text-field__icon) будемо використовувати для того, щоб встановити відносне позиціонування (position: relative). Ця дія дозволить нам розмістити іконку в потрібному місці щодо input, використовуючи вже абсолютне позиціонування (position: absolute). Другий клас (text-field__icon_email) визначатиме іконку, яку ми хочемо вставити.

.text-field__icon { position: relative; } .text-field__icon::before { content: ''; color: #bdbdbd; position: absolute; display: flex; align-items: center; top: 0; bottom: 0; left: 0.625rem; top: 50%; transform: translateY(-50%); } .text-field__icon .text-field__input { padding-left: 2rem; } /* email значок */ .text-field__icon_email::before { content: '@'; } /* іконка лупи */ .text-field__icon_search::before { width: 1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23bdbdbd' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l00. 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: центр; }

Ще один варіант оформлення:

input з активною svg-іконкою

У цьому прикладі помістимо в іконку, на яку можна натиснути.

Для цього ми також як і в попередньому прикладі обернули на . . Саму svg-іконку обернули з класом text-field__aicon і помістили поряд з .

Оформлення виконали так:

.text-field__icon { position: relative; } .text-field__icon input { padding-right: 2.5rem; } .text-field__aicon { position: absolute; display: flex; align-items: center; top: 0; bottom: 0; right: 0.875rem; width: 1rem; cursor: pointer; color: #bdbdbd; transition: color 0.15s ease-in-out; } .text-field__aicon:hover { color: #212529; }

Ще приклад вставки іконки в input:

input з кнопкою

HTML-розмітка input з кнопкою:

Розташування кнопки праворуч від input виконаємо за допомогою флексів:

.text-field__group { display: flex; } /* кнопка */ .text-field__btn { display: inline-block; font-weight: 400; line-height: 1.5; color: #212529; text-align: center; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; background-color: #eee; border: 1px solid #bdbdbd; padding: .375rem .75rem; font-size: 1rem; border-radius: .25rem; transition: background-color .15s ease-in-out; } .text-field__btn:hover { background-color: #bdbdbd; } .text-field__group .text-field__input { border-top-right-radius: 0; border-bottom-right-radius: 0; position: relative; z-index: 2; } .text-field__group .text-field__btn { position: relative; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; }

input з плаваючим label

Розмітка input з плаваючим label:



Email

Коли вказано значення value:

Name

.text-field_floating {position: relative; } .text-field_floating .text-field__input { height: calc(3.5rem + 2px); line-height: 1.25; padding: 1rem 0.75rem; } .text-field_floating .text-field__label { position: absolute; top: 0; left: 0; height: 100%; padding: 1rem .75rem; pointer-events: none; border: 1px solid transparent; transform-origin: 0 0; transition: opacity .15s ease-in-out, transform .15s ease-in-out; } .text-field_floating .text-field__input::-moz-placeholder { color: transparent; } .text-field_floating .text-field__input::placeholder { color: transparent; } .text-field_floating .text-field__input:focus, .text-field_floating .text-field__input:not(:placeholder-shown) { padding-top: 1.625rem; padding-bottom: .625rem; } .text-field_floating .text-field__input:focus~.text-field__label, .text-field_floating .text-field__input:not(:placeholder-shown)~.text-field__label { opacity: .65; transform: scale(.85) translateY(-.75rem) translateX(.15rem); }

Ще один варіант з «плаваючою» міткою:

input із лічильником символів

Приклад у якому під input відображається кількість набраних символів та максимальна довжина:

Це виконується за допомогою наступного коду:


Логін

Стилі для відображення стану валідації input

Застосувати стилі в залежності від стану поля CSS можна за допомогою спеціальних псевдокласів. Наприклад, :valid дозволяє вибрати валідні елементи, а :invalid - не валідні.

.text-field__input:invalid, .text-field__input:valid { border-color: #dc3545; padding-right: 2.25rem; background-image: url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height=' 12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.5625rem center; background-size: 1.125 rem 1.125 rem; } .text-field__input:valid { border-color: #198754; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='% 23198754' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/ %3e%3c/svg%3e"); } .text-field__input:invalid:focus { border-color: #dc3545; box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25); } .text-field__input:valid:focus { border-color: #198754; box-shadow: 0 0 0 0.25rem rgb(25135 84/25%); }

Але, якщо ви хочете контролювати цей процес і додавати стилі за допомогою JavaScript, тоді краще це робити через класи. Наприклад, використовувати клас text-field__input_valid за успішної валідації, а text-field__input_invalid - за не успішної. Їх слід додавати до .


City
Вкажіть місто.

First name
Чудово!

Відображати повідомлення користувачеві або підказки можна через

Приклад валідації форми за допомогою JavaScript

Валідацію елементів форми будемо здійснювати за допомогою функції checkValidity(). Після цього, залежно від її результату, будемо додавати той чи інший клас до , а також повідомлення ( input.validationMessage ) елемент .text-field__message .

// input - змінна, що містить елемент if (input.checkValidity()) { input.classList.add('text-field__input_valid'); input.nextElementSibling.textContent = 'Відмінно!'; } else { input.classList.add('text-field__input_invalid'); input.nextElementSibling.textContent = input.validationMessage; }

Т.к. ми самі відображатимемо повідомлення, то необхідно відключити стандартні підказки браузера. Для цього до тега необхідно додати атрибут novalidate:

Клієнтська перевірка форми після натискання «Надіслати»:

Приклад валідації форми у реальному часі:

Відображення лише помилок:

Повний посібник зі стилів форм

У статті ми розповімо вам, як стандартизувати процес створення форм. А також надамо кілька простих фрагментів стилів для input CSS, які допоможуть вам зробити те саме.

Бонус: Ми також включили в цю статтю посібник зі створення форми підписки на розсилку з елементами анімації за допомогою плагіна WordPress Gravity Forms.

Оновлено: 2022-01-14 17:18:41 Вадим Дворніков автор матеріалу

Починаємо зі скидання HTML5

Існує кілька варіантів скидання HTML5. Але всі дають кінцевий результат, який нам потрібний. Найбільш підходящий спосіб скидання ви можете знайти тут.

Найчастіше ми використовуємо Normalize.css. Це ідеальне поєднання простоти у використанні та якості.

Загальні стилі CSS форми

Поля введення будуть працювати без стилів CSS. Вони будуть виглядати жахливо, але вони будуть працювати.

Але змусити їх працювати – це лише півсправи. Щоб задати стилі так, щоб все виглядало красиво, може знадобитися багато часу та праці. Хороша новина полягає в тому, що ми зробили більшу частину важкої роботи за вас. Погляньте на наведені нижче стилі для CSS input type text :

/* Форми --------------------------------------------- */ input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type ="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"] , input[type="time"], input[type="url"], input[type="week"], select, textarea < border-color: #e0e0e0; -webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); border-width: 1px; border-style: solid; color: #474e57; font-size: 16px; font-weight: 400; padding: 10px; width: 100%; >input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type ="email"]:hover, input[type="month"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]: hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type= "week"]:hover, textarea:hover, select:hover < border-color: #e0e0e0; >input[type="color"]:фокус, input[type="date"]:фокус, input[type="datetime"]:фокус, input[type="datetime-local"]:focus, input[type ="email"]:фокус, input[type="month"]:фокус, input[type="number"]:фокус, input[type="password"]:фокус, input[type="search"]: focus, input[type="tel"]:фокус, input[type="text"]:фокус, input[type="time"]:фокус, input[type="url"]:фокус, input[type= "week"]:focus, textarea:focus, select:focus < border-color: #adadad; -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(160, 160, 160, 0.7); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(160, 160, 160, 0.7); outline: none; >input[type="color"] < padding: 5px; >input[type="checkbox"], input[type="image"], input[type="radio"] < width: auto; >input::-webkit-input-placeholder, textarea::-webkit-input-placeholder < color: #c7c7c7; opacity: 1; font-weight: 400;>input:-moz-placeholder, textarea:-moz-placeholder < color: #c7c7c7; opacity: 1; font-weight: 400; >input::-moz-placeholder, textarea::-moz-placeholder < color: #c7c7c7; opacity: 1; font-weight: 400; >input:-ms-input-placeholder, textarea:-ms-input-placeholder < color: #c7c7c7; opacity: 1; font-weight: 400; >input::placeholder, textarea::placeholder

Пошук ххх картинки в інтернеті вимагає обережності через можливий зміст дорослого контенту.

Скорочення

Якщо ви помітили, ми додали окремі правила до різних елементів CSS input type . Спосіб спростити це, який ви могли бачити в багатьох темах WordPress, полягає в тому, щоб зробити щось на зразок цього:

input, select, textarea

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

Такий підхід до спрощення дасть нам у результаті купу різних елементів введення, які виглядатимуть дивно. Але цього хочемо уникнути. Доклавши більше зусиль для додавання стилів елементів введення, ми отримаємо контроль над усім.

Ми керуємо CSS, а CSS керує нами

Стилі фокусу введення та стану hover роблять дизайн приємнішим. Скільки разів ви чули, що все залежить від деталей? Різниця від додавання цих стилів (у тому числі і для CSS input file) буде невелика, але це значно покращить загальний досвід взаємодії.

Поглиблюємося все далі: додаємо стилі для діапазону, чекбоксу, списку та радіокнопки

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

Призначення стилів для діапазону введення – це зовсім не весело. Повзунок – найменш стандартизований тип елементів введення. Це тому, що він містить досить багато частин, що рухаються, а браузери люблять додавати для них власні вендорні префікси.

У будь-якому випадку, це «Повне керівництво», і воно не могло б вважатися таким, якби ми прогавили цей аспект:

input[type="range"] < -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 28px; margin: 10px 0; width: 100%; >input[type="range"]:focus < outline: none; >input[type="range"]:focus::-ms-fill-lower < background: #adadad; >input[type="range"]:focus::-ms-fill-upper < background: #adadad; >input[type="range"]:focus::-webkit-slider-runnable-track < background: #adadad; >input[type="range"]::-webkit-slider-runnable-track < background: #e0e0e0; border: 0 none; -webkit-border-radius: 3px; border-radius: 3px; cursor: pointer; height: 3px; width: 100%; >input[type="range"]::-webkit-slider-thumb < -webkit-appearance: none; appearance: none; background: #1c1e1f; border: 0 none; -webkit-border-radius: 100%; border-radius: 100%; cursor: pointer; height: 28px; margin-top: 14px; width: 28px; >input[type="range"]::-moz-range-track < background: #e0e0e0; border-radius: 3px; cursor: pointer; height: 3px; width: 100%; >input[type="range"]::-moz-range-thumb < background: #1c1e1f; border: 0 none; border-radius: 100%; cursor: pointer; height: 28px; width: 28px; >input[type="range"]::-ms-track < background: transparent; border-color: transparent; color: transparent; cursor: pointer; width: 100%; height: 3px; >input[type="range"]::-ms-fill-lower < background: #e0e0e0; border-radius: 3px; >input[type="range"]::-ms-fill-upper < background: #e0e0e0; border-radius: 3px; >input[type="range"]::-ms-thumb

Стилізація елемента select в CSS дозволяє покращити зовнішній вигляд випадаючого списку на веб-сторінці.

Якщо ви помітили, у рядках 2-4 наведеного вище коду міститься саме те, що допомагає нам підкорити це поле нашій волі. Магічна властивість appearance.

Властивість appearance застосовується для відображення елемента з використанням оригінальних стилів операційної системи користувача.

Завдання цієї властивості - зробити так, щоб елемент виглядав і поводився певним чином (використовуючи стилі браузерів, які використовуються за умовчанням). Але ми використовували його, щоб зробити прямо протилежне.

Після цього нам потрібно сконцентруватися на покажчику (та частина, яку ви перетягуєте) та треку (слайдері), і браузери використовуватимуть власні вендорні префікси. Мені подобається використовувати range.css, але вам потрібно протестувати його в різних браузерах та їх версіях.

Стилі поля зі списком

Поле CSS input type зі списком багато років залишалося тим каменем, про який розбивався наш дизайн і кросбраузерна сумісність. Пропонувалося багато рішень, у тому числі створювалися цілі бібліотеки Javascript. Але найпростіший спосіб, який я знайшов, полягає в додаванні всього декількох рядків CSS :

Наша основна тема Альфа має наступні варіанти стилів поля зі списком, але якщо ви додасте наведений нижче фрагмент коду CSS в свою таблицю стилів і завантажте вихідні файли для цієї статті, щоб отримати зображення, то отримайте красиві поля зі списком, незалежно від того, в якому браузері відображається форма:

І це все. Ми знову використовуємо властивість appearance. Різні браузери по-різному визначають оформлення input CSS кнопки перемикача. Щоб вирішити цю проблему, можна додати акуратне фонове зображення, яке буде працювати як перемикач.

Використовуйте SVG для зображення. Додатковим перевагою цього формату і те, що він, зазвичай, має менший розмір, ніж звичайний JPG чи PNG .

Враппер це обгортка або контейнер у програмуванні, який використовується для інкапсуляції різних елементів.

Користувальницькі стилі CSS для чекбоксу та радіокнопки

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

input[type="checkbox"], input[type="radio"] < margin: 0; opacity: 0; padding: 0; >input[type="checkbox"] + label, input[type="radio"] + label < background: url(images/checkbox.svg) no-repeat scroll left center transparent; -webkit-background-size: 15px 15px; background-size: 15px 15px; display: inline-block; line-height: 15px; margin-left: -18px; padding-left: 22px; >input[type="checkbox"]:checked + label < background-image: url(images/checked.svg); -webkit-background-size: 16px 15px; background-size: 16px 15px; >input[type="radio"] + label < background-image: url(images/radio.svg); >input[type="radio"]:checked + label < background-image: url(images/radio-select.svg); >

Ми знову використовуємо SVG-зображення для відображення чекбоксів та радіокнопок, а також їх різних станів. Змінивши відступи, поля та непрозорість у перших рядках наведеного вище коду, ми позбавляємося стилів браузера за замовчуванням. У наступних рядках ми використовуємо трюк, розміщуючи зображення там, де вони нам потрібні.

Плагіни WordPress для додавання стилів форм

Тепер у нас є розуміння того, що потрібно зробити, щоб задати стилі для CSS . До цих пір ми використовували їх тільки в умовах, за яких ми маємо повний контроль: статичний HTML. Якщо ви готові не зупинятися на цьому, і хочете знати, як задати стилі форм WordPress, я розповім і про це.

Тільки не це!

Ми використовуємо плагіни, тому що створення форм HTML - це дуже трудомісткий процес. Ці плагіни зазвичай містять свої стандартні стилі. Це робиться для того, щоб форми виглядали однаково добре не тільки в різних браузерах, але й з різними темами, які будуть використовуватись на сайті. Давайте розглянемо як приклад популярний плагін Gravity Forms.

Отже, ми додали стилі користувача для наших полів введення форми, а тепер хочемо встановити на сайті ще і Gravity Forms , як я зробив тут .

Вам доведеться внести одразу кілька змін.Особливо це стосується поля зі списком, чекбоксу та радіокнопки, щоб усе виглядало нормально. Ось що зробив я для оформлення input CSS :

.gform_wrapper .ginput_container_multiselect select < background-image: none; >.gform_wrapper .gfield_checkbox li input + label, .gform_wrapper .gfield_radio li input + label

Я видалив зображення, яке ми використовували для списку, а також вніс деякі незначні зміни для чекбоксу та радіокнопки. У нас більше немає контролю над деревом DOM, оскільки Gravity Forms робить це за нас, тому деякі незначні коригування необхідні.

Ще одна причина внести ці зміни полягає в тому, що ми завантажуємо стилі, які постачаються із плагіном форм. Але якщо ми вирішили не робити цього і хочемо використовувати лише наші CSS input type?

стилі користувача CSS для Gravity Forms

Перше, що нам потрібно зробити, це відключити стилі front-end Gravity Forms. Ось фільтр, який ви можете помістити у файл functions.php :

Потім можна почати задавати власні стилі для конкретної теми. Це довгий та стомлюючий процес. Ми маємо варіант взяти стилі, які ми створили для використання з нашою основною темою, але вони також будуть працювати з іншими Sass-темами WordPress . Перегляньте наші SCSS-файли для Gravity Forms. Якщо SCSS не ваш коник, ви можете переглянути CSS-версію.

Примітка: Кілька разів ми використовували в наших стилях властивість flexbox, але якщо ви хочете забезпечити підтримку IE 10 або нижче, вам не потрібно його додавати.

Стилі форми підписки на розсилку новин

Ви можете застосувати методи, описані в цій статті для налаштування інших плагінів форм WordPress, але я працював саме з плагіном Gravity Forms.

Перше, що нам потрібно зробити, це створити форму. Нам потрібні заголовок форми, поле адреси електронної пошти та кнопка надсилання. Створіть форму або, якщо вам не хочеться з цим возитися, ми вже створили для вас форму, яку можна завантажити та імпортувати на свій сайт.

Якщо ви створюєте форму самостійно, вам потрібно додати до неї клас newsletter-signup .

Ось правила для input CSS , які потрібно задати:

.newsletter-signup_wrapper < background-color: #fff; color: #d5bba4; height: 70px; margin: 2rem auto; overflow: hidden; position: relative; -webkit-transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); transition: all 0.5s cubic-bezier(0.7, 0, 0.3, 1); >.newsletter-signup_wrapper .gform_title < background-color: #e85657; border: 0 none; color: #fff; cursor: pointer; font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif; font-weight: 700; line-height: 7rem; letter-spacing: 1px; overflow: hidden; padding: 0 1rem; text-align: center; text-transform: uppercase; >.newsletter-signup_wrapper .button < background: #ba997b; display: block; font-size: 2rem; font-weight: 800; letter-spacing: 1px; padding: 1.5rem; width: 100%; >.newsletter-signup_wrapper .button:focus, .newsletter-signup_wrapper .button:hover < background: #a9896d; >.newsletter-signup_wrapper .gform_body, .newsletter-signup_wrapper .gform_footer < padding: 0 2rem 2rem; >.newsletter-signup_wrapper form < font-size: 2.4rem; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); >.newsletter-signup_wrapper label < color: #d5bba4; font-weight: 700; font-size: 2rem; padding: 1rem 0 0; text-transform: uppercase; >.newsletter-signup_wrapper .gform_body, .newsletter-signup_wrapper .gform_footer < line-height: 1.75; -webkit-transition: all 0.4s 0.2s; transition: all 0.4s 0.2s; -webkit-transform: rotateX(-45deg); transform: rotateX(-45deg); -webkit-transform-origin: центр верхнього; -ms-transform-origin: центр top; transform-origin: center top; opacity: 0; >.newsletter-signup_wrapper input < -webkit-border-radius: 0; border-radius: 0; >.newsletter-signup_wrapper.open .gform_title < cursor: auto; >.newsletter-signup_wrapper.open .gform_body, .newsletter-signup_wrapper.open .gform_footer < opacity: 1; -webkit-transform: rotateY(0deg); transform: rotateY(0deg);

У формі нашого прикладу використовується кнопка для запуску анімації у верхній частині, але ми не маємо до цього доступу. Gravity Forms не виводить заголовок, тому ми можемо використовувати це. Ми розмістили там елемент із input CSS стилями gform_title , який виглядатиме як кнопка. Крім цього, ми встановили для форми значення line-height, як у цієї псевдокнопки. Це дозволить нам приховати форму доти, доки хтось не клікне по ній мишею.

Наступний фрагмент головоломки - JQuery:

(function( window, $, undefined ) < 'use strict'; var $document = $( document ); function newsletterSignUp() < var $newsletterFormWrap = $( '.newsletter-signup_wrapper' ), $newsletterTitle, $newsletterForm, $ newsletterFormHeight; if ( 0 === $newsletterFormWrap.length ) < return; $newsletterTitle = $newsletterFormWrap.find( '.gform_title' ); ; $newsletterFormHeight = $newsletterForm.height(); $newsletterTitle.on('click', function() < var $that = $( this ); $newsletterFormWrap.addClass( 'open' ).height( $newsletterFormHeight ); / Документ готовий. >)( this, jQuery );

Все, що робить цей код – перевіряє, чи є на цій сторінці конкретна форма, а потім перевіряє, чи існує заголовок. Якщо обидві ці умови виконуються, він просто чекає, коли когось клікне по заголовку. Після того, як це станеться, він додає клас open для контейнера форми та встановлює справжню висоту форми. Фактична анімація визначається правилами оформлення input CSS , які ми використовували раніше.

Ви можете або додати скрипти до файлів вашої теми, або просто помістити їх у новий файл. Якщо ви виберете другий шлях, потрібно буде поставити скрипти в чергу завантаження теми. Ось код, який потрібно додати до файлу functions.php :

Бажаєте побачити форму, яку ми щойно створили, у дії? Зайдіть сюди!

Форма користувача на основі Gravity Forms після додавання анімації

Це, безумовно, повний посібник зі стилів CSS input type . На даний момент у вас є базові знання та безліч прикладів коду, які допоможуть створити та налаштувати свою власну форму.

Input особливості стилізації CSS

Input — це один із найголовніших елементів веб-форм, який дозволяє користувачам вводити та надсилати дані на веб-сторінках. Проте, за умовчанням стилізація input може бути досить нудною і непривабливою.

У цій статті ми розглянемо основні способи стилізації input за допомогою CSS, щоб надати їм більш естетичного та сучасного вигляду. Ви дізнаєтеся про переваги та недоліки різних підходів до стилізації input та зможете використовувати їх на своїх проектах.

Стилізація базових властивостей input

Стилізація кольору фону, тексту та кордону

Один із найпростіших способів зміни зовнішнього вигляду input – це зміна його кольору тла, тексту та кордону. Для цього можна використовувати стандартні CSS властивості, такі як background-color, color та border. Ви можете вибрати будь-який колір та налаштувати його на свій смак.

Зміна форми та розміру

Input може мати різні форми, такі як прямокутник, коло, овал та багато іншого. Для зміни форми input можна використовувати властивість border-radius. Воно дозволяє задавати радіус заокруглення кутів елемента.

Крім того, можна змінювати розмір input за допомогою властивостей width і height. Наприклад, для створення ширшого input, ви можете задати йому ширину більше, ніж за замовчуванням.

Стилізація фокусу

Коли користувач клацає на input, він отримує фокус. Для того, щоб користувач розумів, що input активний, його можна стилізувати при отриманні фокусу. Це можна зробити за допомогою властивості outline чи box-shadow.

Використання псевдокласів для зміни стилю при різних подіях

CSS дозволяє використовувати псевдокласи для зміни стилю input при різних подіях, таких як :hover, :active, :focus та інших. Наприклад, можна змінити колір фону input, коли користувач наводить на нього курсор миші.

У цьому розділі ми розглянули основні властивості input і як стилізувати їх за допомогою CSS. Ви можете використовувати ці прийоми, щоб створювати унікальні та стильні input на ваших веб-сторінках.

Розширена стилізація input

Використання псевдоелементів для додавання додаткових стилів

Псевдоелементи – це елементи, які не існують у HTML-коді, але які можна додати за допомогою CSS. Вони можуть бути використані для додавання додаткових стилів до вводу, таких як значки, текстові підказки і т.д. Наприклад, ви можете додати іконку пошуку у поле введення пошукового запиту за допомогою псевдоелементу :: before.

Стилізація різних типів введення: текстове поле, поле введення пароля, чекбокс, радіокнопки і т.д.

Кожен тип input має свої унікальні властивості, які можуть бути стилізовані за допомогою CSS. Наприклад, можна змінити колір фону, шрифт, розмір і колір тексту, а також форму та стиль кордону.

Стилізація input з використанням фреймворків CSS

Фреймворки CSS, такі як Bootstrap та Foundation, надають готові класи та стилі для input, які можна використовувати для швидкої та зручної стилізації. Це може бути корисним, якщо ви хочете створити стандартні форми з мінімальною кількістю зусиль. Однак, не забувайте, що використання фреймворків може суттєво збільшити розмір вашого проекту, що може негативно вплинути на швидкість завантаження сторінки.

У результаті, розширена стилізація input – це чудовий спосіб покращити зовнішній вигляд та функціональність ваших форм на сайті. Використовуйте різні техніки та методи, щоб створювати унікальні та красиві форми, які будуть залучати користувачів та покращувати досвід використання вашого сайту.

Приклади стилізації input

Приклади стилізації input можуть допомогти вам створити унікальний та привабливий дизайн для вашого веб-сайту. У цьому розділі є кілька прикладів коду для стилізації базових властивостей input, розширеної стилізації input та інтерактивних прикладів для демонстрації ефектів.

/* Стилізація кольору фону, тексту та кордону */ input < background-color: #eee; color: #333; border: 2px solid #ccc; padding: 10px; >/* Зміна форми та розміру */ input[type="text"] < border-radius: 10px; width: 200px; height: 30px; >/* Стилізація фокусу */ input:focus < border: 2px solid #00bfff; background-color: #f2f2f2; >/* Використання псевдоелементів для додавання додаткових стилів */ input[type="checkbox"]::before < content: ""; display: inline-block; width: 20px; height: 20px; background-color: #ccc; margin-right: 10px; border-radius: 5px; >input[type="checkbox"]:checked::before < background-color: #00bfff; >/* Стилізація input з використанням фреймворків CSS */ /* Приклад стилізації input за допомогою Bootstrap */ /* Посилання на стилі Bootstrap має бути додане в head секцію */ /* input.form-control < border-radius: 10px; >*/ /* Інтерактивні приклади для демонстрації ефектів */ /* Приклад стилізації input за допомогою CSS Grid та Flexbox */ .container < display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; >.form-item <position: relative; >.form-item input < grid-column: 1 / span 2; >.form-item::before < content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background-color: #ccc; border-radius: 50%; transition: all 0.3s ease; >.form-item input:focus ~::before < background-color: #00bfff; transform: translate(-50%, -50%) scale(2); >/* Приклад анімації фокусу input */ input:focus + label::after < content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 50px; height: 2px; background-color: #00bfff; animation: input-focus-animation 0.3s ease-in-out forwards; >@keyframes input-focus-animation < from < width: 0; >to < width: 50px; >>

Input — це не просто елемент веб-форми, це важливий інструмент, який може підвищити якість досвіду користувача на вашому веб-сайті.У цій статті ми розглянули основні способи стилізації input за допомогою CSS та навели приклади коду, які допоможуть вам створювати більш привабливі та функціональні форми. Сподіваюся, що ця стаття виявиться корисною для вас і допоможе вам створювати красиві та зручні форми на вашому веб-сайті.

Як встановити стилі для input