Código de CSS - Modificar el diseño del selector de archivos con CSS

Imágen de perfil

Modificar el diseño del selector de archivos con CSSgráfica de visualizaciones


CSS

Publicado el 17 de Agosto del 2013 por Xavi
7.271 visualizaciones desde el 17 de Agosto del 2013. Una media de 49 por semana
Código que muestra como utilizar estilos css para modificar el diseño de un input type=file.
Se utiliza jquery únicamente para mostrar el archivo seleccionado.

Versión 1

Publicado el 17 de Agosto del 2013gráfica de visualizaciones de la versión: Versión 1
7.272 visualizaciones desde el 17 de Agosto del 2013. Una media de 49 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver el ejemplo aquí
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!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>



Comentarios sobre la versión: Versión 1 (0)


No hay comentarios
 

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2458