CSS Форми
Зовнішній вигляд HTML-форми може бути значно покращено за допомогою CSS:
Стилізація полів введення (input)
Використовуйте властивість width щоб визначити ширину поля введення:
Наведений вище приклад відноситься до всіх елементів <input>. Якщо ви хочете стилізувати лише визначений тип введення, ви можете використовувати атрибути селекторів:
input[type=text]- обере лише текстові поляinput[type=password]- обере лише поля пароляinput[type=number]- обере лише числові поля- і т.д.
Простір всередині та зовні поля Input
Використовуйте властивість padding щоб додати простір всередині текстового поля.
Порада: Якщо у вас багато полів input, що розташовуються один за одним, ви також можете додати трохи margin, щоб додати більший відступ між ними:
Приклад
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Спробуйте самі »
Зверніть увагу, що ми встановили властивість box-sizing на border-box. Це гарантує, що відступи і, в підсумку, межі включені в загальну ширину і висоту елементів.
Ви можете дізнатись більше про властивість box-sizing в розділі CSS Розмір блоку на нашому сайті W3Schools українською.
Поля Input з межами
Використовуйте властивість border, щоб змінити розмір і колір межі, та використовуйте властивість border-radius, щоб додати округлі кути:
Якщо необхідно відобразити лише нижню межу, використовуйте властивість border-bottom:
Кольорові поля Input
Використовуйте властивість background-color, щоб додати колір фону для input, і властивість color, щоб змінити колір тексту:
Фокусовані поля Input
За замовчуванням деякі браузери додають синій контур навколо поля введення, коли воно отримує фокус (натискання). Ви можете видалити цю поведінку, додавши outline: none; до даних input.
Використовуйте селектор :focus, щоб зробити щось із полем input, коли він отримує фокус:
Input з іконкою/зображенням
Якщо необхідна іконка всередині input, використовуйте властивість background-image та розмістіть її за допомогою властивості background-position. Також зверніть увагу, що ми додали великий лівий відступ (padding), щоб зарезервувати простір для іконки:
Приклад
input[type=text] {
background-color: white;
background-image: url('../images/searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
Спробуйте самі »
Анімований пошук Input
В цьому прикладі ми використовуємо CSS властивість transition щоб анімувати ширину пошукового введення, коли він отримує фокус. Докладніше про властивість transition ви дізнаєтесь пізніше в розділі CSS Переходи на нашому сайті W3Schools українською.
Приклад
input[type=text] {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Спробуйте самі »
Стилізація поля Textarea
Порада: Використовуйте властивість resize, щоб попередити зміну розміру текстових областей (відключіть "захоплення" в правому нижньому куті поля):
Приклад
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Спробуйте самі »
Стилізація меню Select
Приклад
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Спробуйте самі »
Стилізація кнопок Input
Приклад
input[type=button], input[type=submit], input[type=reset] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Порада: використовуйте width: 100% для кнопок на всю ширину */
Спробуйте самі »
Для отримання додаткової інформації про те, як стилізувати кнопки за допомогою CSS, прочитайте розділ CSS Кнопки на нашому сайті W3Schools українською.
Адаптивна форма
Змініть розмір вікна браузера, щоб побачити ефект. Якщо ширина екрану меньше 600 пікселів, розташуйте дві колонки одна над одною, а не поруч одна біля одної.
Додатково: В наступному прикладі використовується медіа запит для створення адаптивної форми. Ви дізнаєтесь більше про це в наступному розділі.
