Bootstrap 4, formularios personalizados

Formularios personalizados con Bootstrap 4

Bootstrap 4 viene con elementos de formulario personalizados, que están destinados a reemplazar los valores predeterminados del navegador.

Casilla de verificación personalizada

Para crear una casilla de verificación personalizada, ajusta un elemento contenedor, como <div>, con una clase de .custom-control y .custom-checkbox alrededor de la casilla de verificación. Luego agrega .custom-control-input a la entrada con type = «checkbox».

Consejo: Si usas etiquetas para el texto que lo acompaña, agrega la clase .custom-control-label. Ten en cuenta que el valor del atributo for debe coincidir con el id de la casilla de verificación.

Ejm

<form>
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
    <label class="custom-control-label" for="customCheck">
    Check this custom checkbox</label>
  </div>
</form>

Switch (Interruptor) personalizado

Para crear un «interruptor de palanca» personalizado, ajusta un elemento contenedor, como <div>, con una clase de .custom-control y .custom-switch alrededor de una casilla de verificación. Luego agrega la clase .custom-control-input a la casilla de verificación.

Ejm

<form>
  <div class="custom-control custom-switch">
    <input type="checkbox" class="custom-control-input" id="switch1">
    <label class="custom-control-label" for="switch1">Toggle me</label>
  </div>
</form>

Botones de radio personalizados

Para crear un botón de opción personalizado, ajusta un elemento contenedor, como <div>, con una clase de .custom-control y .custom-radio alrededor del botón de opción. Luego agrega .custom-control-input a la entrada con type = «radio».

Consejo: Si usa etiquetas para el texto que lo acompaña, agrega la clase .custom-control-label. Ten en cuenta que el valor del atributo for debe coincidir con el de la radio:

Ejm

<form>
  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customRadio"
    name="example1" value="customEx">
    <label class="custom-control-label" for="customRadio">Custom radio</label>
  </div>
</form>

Controles de formulario personalizados en línea

Si deseas que los controles de formulario personalizados se coloquen uno al lado del otro (en línea), agrega . al contenedor / contenedor:

Ejm

<form>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio">Custom radio 1</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="customRadio2" name="example" value="customEx">
    <label class="custom-control-label" for="customRadio2">Custom radio 2</label>
  </div>
</form>

Menú de selección personalizada

Para crear un menú de selección personalizado, agrega la clase .custom-select al elemento <select>.

Ejm

<form>
  <select name="cars" class="custom-select">
    <option selected>Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
</form>

Tamaño de menú de selección personalizada

Usa la clase .custom-select-sm para crear un menú de selección pequeño y la clase .custom-select-lg para uno grande.

Ejm

<form>
  <!-- Small -->
  <select name="cars" class="custom-select-sm">
    <option selected>Small Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>

  <!-- Large -->
  <select name="cars" class="custom-select-lg">
    <option selected>Large Custom Select Menu</option>
    <option value="volvo">Volvo</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
</form>

Rango personalizado

Ejm

<form>
  <label for="customRange">Custom range</label>
  <input type="range" class="custom-range" id="customRange" name="points1">
</form>

Carga personalizada de archivos

Para crear una carga de archivo personalizada, envuelve un elemento contenedor con una clase de archivo .customalrededor de la entrada con type = «file». Luego agrega el .custom-file-input a él.

Consejo: Si usas etiquetas para el texto que lo acompaña, agregue la clase .custom-file-label. Ten en cuenta que el valor del atributo for debe coincidir con el id de la casilla de verificación.

Ten en cuenta que también debes incluir algún código jQuery si deseas que aparezca el nombre del archivo cuando selecciones un archivo específico.

Ejm

<form>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile">
    <label class="custom-file-label" for="customFile">Choose file</label>
  </div>
</form>

<script>
// Add the following code if you want the name of the file appear on select
$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});
</script>