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

Imágen de perfil
Val: 637
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

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


CSS

Publicado el 17 de Agosto del 2013 por Xavi
9.712 visualizaciones desde el 17 de Agosto del 2013
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
9.713 visualizaciones desde el 17 de Agosto del 2013
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
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2458