Pedir presupuesto

Botón Input File con bonito aspecto

Seguramente alguna vez os habéis visto en la tesitura de tener que crear un formulario para subir algún archivo al servidor, ya sea fotos, documentos, etc …
La etiqueta

la verdad es que deja mucho que desear en cuanto a aspecto, así que vamos a maquillarlo un poco:

Lo primero que haremos será colocar el input file dentro de un div:
[html]

[/html]

Ahora tocaremos un poco CSS para darle otro aspecto a la caja del Upload.

[css]div.upload {
position: relative;
width: 80px;
height: 24px;
overflow:hidden;
background:url(btn_upload.png) left top no-repeat;
clip:rect(0px, 80px, 24px, 0px );
}

div.upload input {
position: absolute;
left: auto;
right: 0px;
top: 0px;
margin:0;
padding:0;
filter: Alpha(Opacity=0);
-moz-opacity: 0;
opacity: 0;
}[/css]

Con este CSS, hemos hecho transparente el input file y evitamos que le control se salga de los límites.
Y para que su aspecto aun sea mejor, se le añade al div una imagen. Podemos ver como quedaría despues de todo el botón:

Via: Dmug

¿Te ha gustado?, Comparte!!

3 comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es