Muy buenas a todos, estoy haciendo un formulario cuyo diseño me está trayendo bastantes quebraderos de cabeza. Lo que el diseñador quiere que haga es lo que podéis ver en la foto:
A simple vista es un campo
<input type="file" /> cuyo botón es diferente de los habituales. Estuve indagando por la red a ver cómo podría hacerse, y lo conseguí hacer con opacidad aquí os dejo el código:
Código:
CSS
body {
background: #f4f4f4;
}
form.example input {
background: #fff no-repeat 0 -58px;
border: none;
width: 241px;
height: 22px;
padding-left: 3px;
padding-top: 3px;
}
form.example input:focus {
background-color: transparent;
}
form.example div.fileinputs {
position: relative;
height: 30px;
width: 300px;
}
form.example input.file {
width: 300px;
margin: 0;
}
form.example input.file.hidden {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
form.example div.fakefile {
position: absolute;
top: 0px;
left: 0px;
width: 350px;
padding: 0;
margin: 0;
z-index: 1;
line-height: 90%;
}
form.example div.fakefile input {
margin-bottom: 5px;
margin-left: 0;
}
}
HTML
<form action="#" class="example">
<div class="fileinputs">
<input type="file" class="file hidden" noscript="true" />
<div class="fakefile">
<input value="Envía tu CV desde tu equipo" />
<img src="senfoastur/web/img/explorar.png" alt="browse" /></div>
</div>
</form>
Mis problemas son dos:
1._ El botón explorar no se alinea con la caja de búsqueda de archivo, y todos mis intentos lo único que han conseguido es apartar ambas cosas a la vez del borde superior.
2._ Lo he probado en Firefox, Chrome, Safari y Ópera, y se ve igual en todos salvo en Ópera, que parece que ignora la opacidad ¿sabríais decirme si hay algún modo de que no la ignore o la simule? En explorer desde la oficina no lo puedo probar, así que hasta que llegue a casa no sabré el desastre que seguramente sea..
Como siempre, muchas gracias de antemano ^^