Como Alterar O Layout De Um Input Com CSS

Você sabia que você consegue alterar o estilo de um input, podendo adicionar o estilo que quiser, mas mantendo as propriedades de um input?
Como por exemplo, um input do tipo file, ter a forma de um botão com uma imagem/ícone.

Desta forma, conseguimos manter o estilo da nossa página e conseguimos manter o comportamento padrão do componente!

O GIF abaixo demonstra um exemplo, onde temos um input file com layout de um botão comum:

Para fazermos isso, basicamente usamos … coisas do HTML:

• Input type file com ID e display none
• Label com propriedade FOR
• Imagem, para deixar bonito o botão!

Então, nosso HTML ficaria:

<input id="uploadPhoto" type="file" accept="image/*" style="display: none" />
<label for="uploadPhoto" class="btn-cta">
    Upload picture
    <img src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/action-upload-alt-512.png" style="width: 20px" />
</label>

É muito importante adicionarmos o display none no input.
Pois precisamos esconder esse input da nossa exibição padrão, e deixar o comportamento seja guiado pelo nosso label!

E apenas para estilizar este nosso label, vamos adicionar o seguinte CSS:

.btn-cta {
  background: #fff;
  border: 2px solid #424242;
  border-radius: 50px;
  color: #424242;
  cursor: pointer;
  font-weight: bold;
  padding: 6px 16px;
  width: 100%;
}

Neste link você encontra o código feito neste post.
Esta dica funciona para outros tipos de inputs, solte sua criatividade para personalizar os inputs que você quiser!