Crear cuenta<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Modificar el diseño del selector de archivos con CSS</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
// Cuando se modifique el input type=file
$(".custom-input-file input:file").change(function(){
if($(this).val())
{ // Si tiene valor, se muestra en el class .files
$(this).parent().find(".files").html($(this).val());
}else{
// Si no tiene valor, se muestran los puntos ...
$(this).parent().find(".files").html("...");
}});
});
</script>
<style>
.custom-input-file {
float:left; overflow:hidden; position:relative; cursor:pointer; width:200px;border:1px solid #ccc;
border-radius:5px;
text-align:center;
font-family:Arial;
font-size:12px;
}.custom-input-file:hover {
background-color:#ccc;
}.custom-input-file input[type=file] {
margin:0; padding:0; outline:0;font-size:10000px;
border:10000px solid transparent; opacity:0px;filter:alpha(opacity=0);
position:absolute;right:-1000px;
top:-1000px;
cursor:pointer; }.files {
font-size:9px;
}</style>
</head>
<body>
<h1>Modificar el diseño del selector de archivos con CSS</h1>
<p>
Aquí se muestra como utilizar estilo css para modificar el
diseño de un input type=file.
<br>Se utiliza jquery, únicamente para mostrar el archivo
seleccionado.</p>
<form action="" method="post" enctype="multipart/form-data">
<div class='custom-input-file'>
<input type="file" name="images">
Seleccionar archivo
<div class="files">...</div>
</div>
<input type="submit" class="button" value="Enviar">
</form>
<p>Información obtenida de:
<a href="http://jsfiddle.net/angelfcm/nETSD/"
target="_blank">http://jsfiddle.net/angelfcm/nETSD/</a>
</p>
<p>
<a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a>
</p>
</body>
</html>
No hay comentarios