Somos muchos los programadores o desarrolladores web que nos enfrentamos a determinadas etiquetas de HTML con las que tenemos que lidiar y no se dejan modificar mucho ¿verdad?.
En muchas ocasiones, queremos crear elementos increíbles, personalizados y nos encontramos con grandes dificultades para que se vean en diferentes navegadores de la misma forma.
A veces, es fácil nos basamos en un Bootstrap, y modificado colores podemos darle un estilo distinto al proyecto y que se asemeje más a la imagen corporativa de la empresa.
Personalizar input type file
Normalmente a elemento input type file no se le suele dar un estilo, a no ser que se use una librería de jQuery o JavaScript a modo de Uploader.
En este caso os traigo una propuesta de diseño para el input type file que se comportará como un botón.
Cómo dibujar el input file, pues bien lo tenemos que encerrar en un div o capa que tenga una clase de css llamada «custom-input-file», esta clase es la que le va a dar el diseño alrededor del input. El propio input también tendrá una clase definida «input-file».
<div class="custom-input-file col-md-6 col-sm-6 col-xs-6"> <input type="file" id="fichero-tarifas" class="input-file" value=""> Subir fichero... </div>
Input file CSS, css para el componente html input file
A continuación os pongo el css de ambas class.
.custom-input-file { background-color: #941B80; color: #fff; cursor: pointer; font-size: 18px; font-weight: bold; margin: 0 auto 0; min-height: 15px; overflow: hidden; padding: 10px; position: relative; text-align: center; width: 400px; } .custom-input-file .input-file { border: 10000px solid transparent; cursor: pointer; font-size: 10000px; margin: 0; opacity: 0; outline: 0 none; padding: 0; position: absolute; right: -1000px; top: -1000px; }
Y vualà listo!! diseño nuevo a un input type=»file». Al pinchar el fichero abrirá una ventana de Windows donde podremos escoger el documento queremos subir.
¿Qué te parece? Fácil, ¿verdad? Coméntame, ¿qué otras cosas de html y css te interesaría que te explique?.
Qué hemos hecho
Pues, muy fácil, te lo explico.
Hemos creado un elemento de HTML, si te fijas la etiqueta es:
<input type="file"/>
- Es un tipo de elemento para recogida de datos INPUT.
- Gracias al atributo type=»file» para poder decirle al formulario que vamos a subir un fichero, ese fichero puede ser un pdf, una imagen, un fichero en principio de cualquier formato.
- Digo en principio porque con especificaciones concretas podremos decirle qué tipo de ficheros pueden subirse… pero eso, es mucho más avanzado, ahora estamos fijándonos en el estilo nada más.
- Este elemento es una etiqueta única, no tiene etiqueta de cierre si te fijas, no es como el párrafo que es <p></p>.
- Tiene un atributo de clase de CSS, class=»input-file» el cual nos servirá para darle estilo al propio input.
- Además tiene otro atributo que es id=»fichero-tarifas», en este caso nos servirá para posteriormente decirle al formulario cómo recoger el fichero.
- Este elemento está dentro de un div, una capa, la cual también tiene atributos clases al que le estamos dando estilo, gracias al CSS que te he compartido.
- Si dedicas un ratito a mirar el CSS verás que es muy fácil de identificar cada estilo añadido. Tiene especificaciones de colores, de fondos, de letras, de tamaños…
Por si quieres profundizar en HTML, y cómo hacer páginas web en HTML, te recomiendo esta página web. Es una página de libros y te recomiendo uno que está muy bien relacionado con estos temas.
Mónica Saavedra
Más ejemplos de personalización de input type file
En este caso vamos a personalizar input type file usando CSS, haciendo un botón vistoso, trabajando el aspecto del mismo.
<div class="input-file">
<input type="file" id="file" class="input-file-input"/>
<label for="" class="input-file-btn">
Seleccionar archivo
</label>
</div>
¿De dónde partimos? Dentro de un div elemento de HTML tenemos:
- Tenemos el propio input file.
- Otro label con el atributo class=»input-file-btn» que lo usaremos como botón para que nos abra la ventana Windows para añadir el documento.
Ahora a continuación, aparece un css simplemente para resetear lo que está configurado por defecto por el navegador y por los estilos aplicados, pero en tu caso no tendrá sentido que lo incorpores.
Vamos a ver cómo le damos estilo al div contenedor. Simplemente le estoy pidiendo que se posicione a la derecha, que tenga un determinado tamaño y que su margen superior es de 10px.
# reseteo de estilos #
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
# información sobre colores aplicados #
:root {
--color-bg-btn: #9875F3;
--color-bg-btn-hover: #4D1FC6;
--color-shadow-btn-active: rgba(0, 0, 0, .3);
--color-border-field: rgb(200, 200, 200);
}
.input-file {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-top: 10px;
}
Posteriormente, le daré estilos a input-file-input que es el elemento propiamente dicho del input. Que simplemente queremos que desaparezca para poder quedarnos sólo con el label que se convertirá en botón que añadirá la acción.
.input-file-input {
display:none;
}
Le damos estilo al label. Añadí un estilo para que parezca que pulsamos el botón y al pasar por encima cambia de color.
#css label para que se comporte como un botón#
.input-file__btn {
height: 34px;
padding: 6px 12px;
border-radius: 17px;
background-color: var(--color-bg-btn);
color: white;
width: 170px;
text-align: center;
line-height: 22px;
cursor: pointer;
}
.input-file__btn:hover {
background-color: var(--color-bg-btn-hover);
}
.input-file__btn:active {
-webkit-box-shadow: 0 3px 5px var(--color-shadow-btn-active) inset;
box-shadow: 0 3px 5px var(--color-shadow-btn-active) inset;
}
sencillo y lindo, gracias!
Muchas gracias por comentar Cecilia, me encanta que te haya parecido sencillo!! ¿Para qué lo usaste?
Hola!
Gracias por compartir tu conocimiento, me ha funcionado de maravilla
Hola Julián, gracias a ti por decirme que te ha ayudado, me encanta saberlo.