Resumen de IA
¿Te gustaría personalizar el estilo del botón Subir archivo? Ya sea que uses el estilo Moderno o Clásico para tus subidas, siempre se aplicará un estilo predeterminado.
Con el poder de CSS, puedes personalizar tus campos de subida para que se ajusten mejor a la marca de tu empresa, ¡y en este tutorial te mostraremos cómo! ¡Vamos a ello!
Creación del formulario
Primero, comenzaremos creando un nuevo formulario y añadiendo nuestros campos.
Si necesitas ayuda para crear tu formulario, consulta esta útil documentación.
Usando el estilo moderno
Cuando hayas añadido un campo de formulario Subir archivo, necesitarás decidir si quieres usar el estilo Moderno o Clásico. En este tutorial, te daremos el CSS necesario para ambos.
Sin embargo, para esta sección, comenzaremos personalizando el estilo Moderno para este campo. Para configurarlo, selecciona Subir archivo en tu formulario y haz clic en la pestaña Avanzado. En el desplegable Estilo, asegúrate de haber seleccionado Moderno y guarda tu formulario.
Añadiendo CSS para el estilo moderno
Al personalizar el estilo Moderno para la subida de archivos, añade este CSS a tu sitio. Si necesitas ayuda sobre cómo y dónde añadir CSS personalizado a tu sitio, por favor revisa 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;
}
Al añadir este CSS, tu Subir archivo para el estilo Moderno ahora puede aparecer más específico para la marca de tu empresa.
Usando el estilo clásico
Al igual que hicimos con el estilo Moderno, también podemos ajustar el estilo para el estilo Clásico.
Para esta sección, necesitarás seleccionar Clásico en el desplegable Estilo ubicado en la pestaña Avanzado del campo.
Añadiendo CSS para el estilo clásico
Al personalizar el estilo Clásico para la subida de archivos, añade este CSS a tu sitio. Para cualquier ayuda sobre cómo y dónde añadir CSS personalizado a tu sitio, por favor revisa 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;
}
Ten en cuenta que Firefox no admite ::before y ::after en los elementos de entrada. Al usar este CSS en Firefox, no aparecería ningún texto en el botón de subida para este navegador.
¡Y eso es todo! Ahora puedes actualizar fácilmente el estilo del botón Subir archivo. ¿Te gustaría designar un directorio específico para tus subidas de archivos? Echa un vistazo a nuestro tutorial sobre Cómo definir un directorio específico para las subidas de archivos.