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

Bootstrap 4 представляет пользовательские формы — это полностью настраиваемые элементы формы, которые заменяют элементы формы в браузере по умолчанию. Идея создания пользовательских форм заключается в том, что они допускают дополнительную настройку и кроссбраузерность.

Bootstrap 4 использует CSS, чтобы скрыть оригинальный элемент формы (через opacity). Затем он использует CSS для создания нового элемента формы.

Флажки и переключатели

Флажки

При использовании флажков вставьте их в элемент <div> с применением классов .custom-control и .custom-checkbox. Также используйте .custom-control-input для фактического элемента <input> и .custom-control-label для элемента <label>.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Ботинки</label>
</div>

Переключатели

Пользовательские переключатели настраиваются аналогично флажкам. Единственное отличие состоит в том, что вам нужно использовать .custom-radio вместо .custom-input для элемента <label>.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Ботинки</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Туфли</label>
</div>

Строчные элементы форм

Пользовательские флажки и переключатели по умолчанию располагаются друг под другом. Чтобы отобразить их в одну строку, добавьте родительский класс .custom-control-inline.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Ботинки</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Туфли</label>
</div>

Элемент <select>

Чтобы создать пользовательский элемент управления <select>, добавьте класс .custom-select к элементу <select>.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<select class="custom-select">
  <option selected>Выберите</option>
  <option value="1">Ботинки</option>
  <option value="2">Туфли</option>
  <option value="3">Ноги</option>
</select>

Загрузка файла

Чтобы создать пользовательский элемент формы «загрузить файл», вставьте элемент <input> внутрь <div>, к которому применяется класс .custom-file. Используйте .custom-control-input для фактического элемента <input>, а также используйте элемент <label> с классом .custom-file-label.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Выберите файл</label>
</div>