martes, 16 de abril de 2013
personalizando la input file
que tal en este post les mostrare como personalizar este tipo de "input"
ya que no se le puede dar mucho estilo(a el boton es imposible), podremos darle estilo solo con css y un poco de js para hacer que funcione.
Bueno este es el codigo HTML:
Codigo Fuente:
<div class="contenedor"><div class="transparente"></div>
<div class="boton"><button class="botonexaminar" onclick="document.getElementById('examinar').click();">EXAMINAR</button></div><input type="file" id="examinar" onchange="this.style.color='green';">
</div> //el js esta ya esta en el HTML
Codigo Fuente:
.contenedor{
width: 280px; height: 28px; position: relative; overflow: hidden; background: black; border-radius: 5px;
}
#examinar{
height: 30px; position: absolute; left:-65px; top: 5px; background: black; color:red;
display: block; font-size: 12px; padding-top: 5px;
}
.boton{
width: 50px; height: 30px; position: absolute; top: -1px; left: -1px; z-index: 1;
}
.botonexaminar{
width: 63px; height: 30px; font-size: 10px; background: black; border: white solid 1px; color:gray; font-weight: bold; -webkit-transition:all .7s ease; border-top-left-radius: 5px; border-bottom-left-radius: 5px; cursor: pointer;
}
.botonexaminar:hover{
color: white;
}
.transparente{
width: 230px; height: 30px; background: transparent; position: absolute; left: 63px; top: 0px; z-index: 1;
}
y con este codigo ya pueden hacer su input file personalizado
resultado
y listo
Bueno este es el codigo HTML:
Codigo Fuente:
<div class="contenedor"><div class="transparente"></div>
<div class="boton"><button class="botonexaminar" onclick="document.getElementById('examinar').click();">EXAMINAR</button></div><input type="file" id="examinar" onchange="this.style.color='green';">
</div> //el js esta ya esta en el HTML
Codigo Fuente:
.contenedor{
width: 280px; height: 28px; position: relative; overflow: hidden; background: black; border-radius: 5px;
}
#examinar{
height: 30px; position: absolute; left:-65px; top: 5px; background: black; color:red;
display: block; font-size: 12px; padding-top: 5px;
}
.boton{
width: 50px; height: 30px; position: absolute; top: -1px; left: -1px; z-index: 1;
}
.botonexaminar{
width: 63px; height: 30px; font-size: 10px; background: black; border: white solid 1px; color:gray; font-weight: bold; -webkit-transition:all .7s ease; border-top-left-radius: 5px; border-bottom-left-radius: 5px; cursor: pointer;
}
.botonexaminar:hover{
color: white;
}
.transparente{
width: 230px; height: 30px; background: transparent; position: absolute; left: 63px; top: 0px; z-index: 1;
}
y con este codigo ya pueden hacer su input file personalizado
resultado
y listo
Suscribirse a:
Entradas (Atom)