Пользовательские формы

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.