Personalizando o Checkbox

Para criar um checkbox personalizado coloque o controle a ser personalizado dentro de uma container ( como uma div ) e use a classe .custom-control e .custom-checkbox em volta do . Então adicione a classe .custom-control-input no .

Dica: Utilize labels para acompanhar o texto e adicione a classe .custom-control-label. Note que o valor do atributo for deve ser o id do checkbox:





Personlizando Radio Buttons

Para criar botões radio personalizado envolva o elemento em um container, como uma div por exemplo com a classe .custom-control e coloque a classe .custom-radio ao redor do botão tipo radio. Então adicione a classe .custom-control-input ao botão radio.

Dica: Se você usa labels para acompanhar o controle adicione a classe .custom-control-label. Note que o valor do atributo for deve ser o id do botão radio :





Personalizando o Select

Para criar um select personalizado adicione a classe .custom-select ao elemento :




Personalizando Range

Para criar um range personalizado adicione a classe .custom-range ao elemento input element com o tipo type="range" :




Personalizando o File UpLoad

para criar um file upload personalizado envolva o elemento com um container com a classe .custom-file ao redor do elemento e no elemento input adicione a classe type="file". Então adicione a classe .custom-control-input a ele :

File Upload Personalizado:

Arquivo Default :