Пользовательские формы
Bootstrap 4 представляет пользовательские формы — это полностью настраиваемые элементы формы, которые заменяют элементы формы в браузере по умолчанию. Идея создания пользовательских форм заключается в том, что они допускают дополнительную настройку и кроссбраузерность.
Bootstrap 4 использует CSS, чтобы скрыть оригинальный элемент формы (через opacity). Затем он использует CSS для создания нового элемента формы.
Флажки и переключатели
Флажки
При использовании флажков вставьте их в элемент <div> с применением классов .custom-control и .custom-checkbox. Также используйте .custom-control-input для фактического элемента <input> и .custom-control-label для элемента <label>.
Переключатели
Пользовательские переключатели настраиваются аналогично флажкам. Единственное отличие состоит в том, что вам нужно использовать .custom-radio вместо .custom-input для элемента <label>.
Строчные элементы форм
Пользовательские флажки и переключатели по умолчанию располагаются друг под другом. Чтобы отобразить их в одну строку, добавьте родительский класс .custom-control-inline.
Элемент <select>
Чтобы создать пользовательский элемент управления <select>, добавьте класс .custom-select к элементу <select>.
Загрузка файла
Чтобы создать пользовательский элемент формы «загрузить файл», вставьте элемент <input> внутрь <div>, к которому применяется класс .custom-file. Используйте .custom-control-input для фактического элемента <input>, а также используйте элемент <label> с классом .custom-file-label.
См. также
- <input>
- <label>
- <select>
- Аккордеон меню
- Вкладки на CSS
- Выпадающее меню
- Выравнивание элементов форм
- Загрузка файлов
- Использование :checked
- Кнопки
- Кнопки
- Отправка данных формы
- Переключатели
- Переключатели
- Подсказка в поле формы
- Поле для ввода пароля
- Поле для пароля
- Поле со списком
- Поле со списком
- Построение форм
- Скрытое поле
- Стилизация переключателей
- Стилизация флажков
- Сумасшедшие формы
- Текстовое поле
- Текстовое поле
- Флажки
- Флажки
- Формы в Bootstrap 4
- Формы в HTML
- Элемент label