botão de upload de arquivo personalizado usando o bootstrap

enquanto o elemento de entrada de arquivo padrão no Twitter Bootstrap pode não ter um apelo estético, é possível criar um botão personalizado e personalizado que a aparência do botão Azul. Html:

para o bootstrap 3, 4 e 5, uma solução html direta está disponível:

Navegue

Este elemento de entrada oculto funcionará como um controle regular de entrada de arquivo, mantendo o estilo de botão personalizado. Combinação:

    Browse 

html:

Navegue

css:

. BTN-FILE { Posição: relativa; estouro: oculto; } .btn-File Input [type = arquivo] { Posição: Absoluto; topo: 0; Direita: 0; largura min: 100%; Min-altura: 100%; Size da fonte: 100px; Alinhamento de texto: à direita; filtro: alfa (opacidade = 0); opacidade: 0; Esboço: Nenhum; Antecedentes: Branco; Cursor: herdar; exibição: bloco; }

Embora esse método envolva CSS adicional, ele garante compatibilidade com os navegadores mais antigos do IE. Se você precisar de suporte para navegadores ainda mais antigos, poderá usar a abordagem herdada.