ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Формы


Внешний вид HTML-формы может быть значительно улучшен с помощью CSS:

Попробуйте сами »

Стилизация полей ввода (input)

Используйте свойство width чтобы определить ширину поля ввода:

Пример

input {
  width: 100%;
}
Попробуйте сами »

Приведенный выше пример относится ко всем элементам <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 Размер блока.


Поля Input с границами

Используйте свойство border чтобы изменить размер и цвет границы, и используйте свойство border-radius, чтобы добавить округлые углы:

Пример

input[type=text] {
  border: 2px solid red;
  border-radius: 4px;
}
Попробуйте сами »

Если вы хотите только нижнюю границу, используйте свойство border-bottom:

Пример

input[type=text] {
  border: none;
  border-bottom: 2px solid red;
}
Попробуйте сами »

Цветные поля Input

Используйте свойство background-color, чтобы добавить цвет фона для input, и свойство color чтобы изменить цвет текста:

Пример

input[type=text] {
  background-color: #3CBC8D;
  color: white;
}
Попробуйте сами »

Фокусированные поля Input

По умолчанию некоторые браузеры добавляют синий контур вокруг ввода, когда он получает фокус (нажатие). Вы можете удалить это поведение, добавив outline: none; к данным input.

Используйте селектор :focus чтобы сделать что-то с полем input, когда он получает фокус:

Пример

input[type=text]:focus {
  background-color: lightblue;
}
Попробуйте сами »

Пример

input[type=text]:focus {
  border: 3px solid #555;
}
Попробуйте сами »

Input с иконкой/изображением

Если вам нужна иконка внутри input, используйте свойство background-image и расположите его с помощью свойства background-position. Также обратите внимание, что мы добавили большой левый отступ (padding), чтобы зарезервировать пространство для иконки:

Пример

input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}
Попробуйте сами »

Анимированный поиск Input

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

Пример

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 кнопки.


Адаптивная форма

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

Дополнительно: В следующем примере используется медиа запрос для создания адаптивной формы. Вы узнаете больше об этом в следующей главе.

Попробуйте сами »