Bootstrap 4 Formulários Personalizados

O Bootstrap 4 vem com elementos de formulário personalizados, destinados a substituir os padrões do navegador:

Faixa personalizada:

Faixa padrão:

Caixa de seleção personalizada

Para criar uma caixa de seleção personalizada, envolva um elemento de contêiner, como <div>, com uma classe de .custom-controle .custom-checkboxao redor da caixa de seleção. Em seguida, adicione o .custom-control-inputà entrada com type="checkbox".

Dica: Se você usar rótulos para acompanhar o texto, adicione a .custom-control-labelclasse a ele. Observe que o valor do atributo for deve corresponder ao id da caixa de seleção:

Exemplo

<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>

Interruptor personalizado

Para criar um "interruptor de alternância" personalizado, envolva um elemento de contêiner, como <div>, com uma classe de .custom-controle .custom-switchao redor de uma caixa de seleção. Em seguida, adicione a .custom-control-inputclasse à caixa de seleção:

Exemplo

<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>

Botões de opção personalizados

Para criar um botão de opção personalizado, envolva um elemento de contêiner, como <div>, com uma classe de .custom-controle .custom-radioao redor do botão de opção. Em seguida, adicione o .custom-control-inputà entrada com type="radio".

Dica: Se você usar rótulos para acompanhar o texto, adicione a .custom-control-labelclasse a ele. Observe que o valor do atributo for deve corresponder ao id do rádio:

Exemplo

<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 formulários personalizados embutidos

Se você quiser que os controles de formulário personalizados fiquem lado a lado (inline), adicione .custom-control-inlineao wrapper/contêiner:

Exemplo

<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>

Menu de seleção personalizada

Para criar um menu de seleção personalizado, adicione a .custom-selectclasse ao elemento <select>:

Exemplo

<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>

Tamanho do menu de seleção personalizada

Use a .custom-select-smclasse para criar um pequeno menu de seleção e a .custom-select-lgclasse para um grande:

Exemplo

<form>

<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>


<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>

Faixa personalizada

Para criar um menu de intervalo personalizado, adicione a .custom-rangeclasse a uma entrada com type="<range>":

Exemplo

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

Upload de arquivo personalizado

Para criar um upload de arquivo personalizado, envolva um elemento de contêiner com uma classe em .custom-filetorno da entrada com type="file". Em seguida, adicione o .custom-file-inputa ele.

Dica: Se você usar rótulos para acompanhar o texto, adicione a .custom-file-labelclasse a ele. Observe que o valor do atributo for deve corresponder ao id da caixa de seleção:

Observe que você também precisa incluir algum código jQuery se quiser que o nome do arquivo apareça quando você selecionar um arquivo específico:

Exemplo

<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>

Tutorial Bootstrap 4

Bootstrap 4 Grade

Bootstrap 4 Outros

Bootstrap 4 Ref

Bootstrap 4 Formulários Personalizados