Como Alterar a Estilização do Botão de Upload de Arquivo

Ver Markdown

Gostaria de estilizar o botão Upload de Arquivo? Quer você esteja usando o estilo Moderno ou Clássico para seus uploads, sempre haverá uma estilização padrão aplicada.

Com o poder do CSS, você pode personalizar seus campos de upload para serem mais específicos para a marca da sua empresa e, neste tutorial, mostraremos como! Vamos mergulhar de cabeça!

Criação do Formulário

Primeiro, começaremos criando um novo formulário e adicionando nossos campos.

Se precisar de ajuda para criar seu formulário, consulte esta documentação útil.

Usando o Estilo Moderno

Quando você adicionou um campo de formulário Upload de Arquivo, precisará decidir se deseja usar o estilo Moderno ou Clássico. Neste tutorial, forneceremos o CSS necessário para ambos.

No entanto, para esta seção, começaremos estilizando o estilo Moderno para este campo. Para definir isso, selecione o Upload de Arquivo em seu formulário e clique na aba Avançado. No menu suspenso Estilo, certifique-se de ter selecionado Moderno e salve seu formulário.

Adicionando CSS para o Estilo Moderno

Ao estilizar para o upload de arquivo no estilo Moderno, adicione este CSS ao seu site. Se precisar de ajuda sobre como e onde adicionar CSS personalizado ao seu site, revise este tutorial.

.dz-message svg {
    display: none;
}
 
.modern-title::before {
  content: '';
  /*Change the URL below to point to the image you would like to display*/
  background: url(https://myexample-site.com/img/my-new-file-upload-image.svg);
  width: 100px;
  height: 35px;
  background-repeat: no-repeat;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
.wpforms-uploader.dz-clickable {
    min-height: 100px;
}

Lembre-se de atualizar o CSS acima para o plano de fundo. Este URL precisará apontar para a imagem que você deseja usar.

Ao adicionar este CSS, seu Upload de Arquivo para o estilo Moderno agora pode parecer mais específico para a marca da sua empresa.

Usando o Estilo Clássico

Assim como fizemos com o estilo Moderno, também podemos ajustar a estilização para o estilo Clássico.

Para esta seção, você precisará selecionar Clássico no menu suspenso Estilo localizado na aba Avançado do campo.

na guia Avançado do campo de upload de arquivo, selecione Clássico no menu suspenso de estilo

Adicionando CSS para o Estilo Clássico

Ao estilizar para o upload de arquivo no estilo Clássico, adicione este CSS ao seu site. Para qualquer assistência sobre como e onde adicionar CSS personalizado ao seu site, revise este tutorial.

input[type="file"] {
  outline: none !important;
  padding: 4px !important;
  margin: -4px !important;
}
 
input[type="file"]:focus-within::file-selector-button,
input[type="file"]:focus::file-selector-button {
  outline: 2px solid #0964b0 !important;
  outline-offset: 2px !important;
}
 
input[type="file"]::before {
  top: 16px !important;
}
 
input[type="file"]::after {
  top: 14px !important;
}
 
input[type="file"] {
  position: relative !important;
}
 
input[type="file"]::file-selector-button {
  width: 136px !important;
  color: transparent !important;
}
 
input[type="file"]::before {
  position: absolute !important;
  pointer-events: none !important;
  left: 40px !important;
  color: #0964b0 !important;
  content: "Upload File" !important;
}
 
input[type="file"]::after {
  position: absolute !important;
  pointer-events: none !important;
  left: 16px !important;
  height: 20px !important;
  width: 20px !important;
  content: "" !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230964B0'%3E%3Cpath d='M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3h-2zM7 9l1.41 1.41L11 7.83V16h2V7.83l2.59 2.58L17 9l-5-5-5 5z'/%3E%3C/svg%3E") !important;
}
 
input[type="file"]::file-selector-button {
  border-radius: 4px !important;
  padding: 0 16px !important;
  height: 40px !important;
  cursor: pointer !important;
  background-color: white !important;
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05) !important;
  margin-right: 16px !important;
  transition: background-color 200ms !important;
}
 
/* hover state */
input[type="file"]::file-selector-button:hover {
  background-color: #f3f4f6 !important;
}
 
/* active state */
input[type="file"]::file-selector-button:active {
  background-color: #e5e7eb !important;
}

Observe que o Firefox não suporta ::before e ::after em elementos de entrada. Ao usar este CSS no Firefox, nenhum texto apareceria no botão de upload para este navegador.

com este CSS você pode facilmente alterar a estilização do botão de Upload de Arquivo do botão de upload Clássico com exceção do navegador Firefox. O Firefox não suporta os Pseudo-Elementos before e after em CSS

E é isso! Agora você pode atualizar facilmente a estilização do botão Upload de Arquivo. Gostaria de designar um diretório específico para seus uploads de arquivo? Dê uma olhada em nosso tutorial sobre Como Definir um Diretório Específico para Uploads de Arquivo.