Resumo de IA
Gostaria de estilizar o botão Carregar Ficheiro? Quer esteja a usar o estilo Moderno ou Clássico para os seus carregamentos, existe sempre um estilo padrão aplicado.
Com o poder do CSS, pode personalizar os seus campos de carregamento para serem mais específicos para a marca da sua empresa e, neste tutorial, vamos mostrar-lhe como! Vamos começar!
Criação do Formulário
Primeiro, começaremos por criar um novo formulário e adicionar os nossos campos.
Se precisar de ajuda para criar o seu formulário, consulte esta documentação útil.
Usar o Estilo Moderno
Quando adicionar um campo de formulário Carregar Ficheiro, terá de decidir se quer usar o estilo Moderno ou Clássico. Neste tutorial, forneceremos o CSS necessário para ambos.
No entanto, para esta secção, começaremos por estilizar o estilo Moderno para este campo. Para definir isto, selecione Carregar Ficheiro no seu formulário e clique no separador Avançadas. No menu pendente Estilo, certifique-se de que selecionou Moderno e guarde o seu formulário.
Adicionar CSS para o Estilo Moderno
Ao estilizar para o carregamento de ficheiros no estilo Moderno, adicione este CSS ao seu site. Se precisar de ajuda sobre como e onde adicionar CSS personalizado ao seu site, reveja 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;
}
Ao adicionar este CSS, o seu Carregar Ficheiro para o estilo Moderno pode agora parecer mais específico para a marca da sua empresa.
Usar o Estilo Clássico
Tal como fizemos com o estilo Moderno, também podemos ajustar a estilização para o estilo Clássico.
Para esta secção, terá de selecionar Clássico no menu pendente Estilo localizado no separador Avançadas do campo.
Adicionar CSS para o Estilo Clássico
Ao estilizar para o carregamento de ficheiros no estilo Clássico, adicione este CSS ao seu site. Para qualquer assistência sobre como e onde adicionar CSS personalizado ao seu site, reveja 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;
}
Por favor, note que o Firefox não suporta ::before e ::after em elementos de input. Ao usar este CSS no Firefox, nenhum texto apareceria no botão de carregamento para este navegador.
E é tudo! Agora pode atualizar facilmente a estilização do botão Carregar Ficheiro. Gostaria de designar um diretório específico para os seus carregamentos de ficheiros? Dê uma vista de olhos ao nosso tutorial sobre Como Definir um Diretório Específico Para Carregamentos de Ficheiros.