el Reiz

el Reiz

Desarrollo web, Diseño e ilustración y Videojuegos
  • Mostrar Categorías

    Personalizar Input File con CSS y jQuery

    Un codigo interesante y bastante sencillo… Solo usando HTML, CSS y un poco de jQuery personalizaremos un input file. Haremos la estructura html Usaremos CSS para ocultar para personalizar el input Usaremos jQuery para visualizar la ruta de donde subimos el archivo en una etiqueta <span> Estructura html: Hay que contener a nuestro input file de modo que luego podamos ocultarlo CSS Ya teniendo la estructura html pasamos a ocultar el scroll al div (overflow: hidden) que contiene al input file y colocandole “position: relative” tambien un ancho y alto definido por ustedo, dependiendo lo que quieren hacer. al Input file se dire que sea “position: absolute;top: 0; right: 0; font-size:100px;opacity: 0;cursor: pointer” con esto haremos que el texto del input sea gigante y al absolute podremos dar click sin problemas en el recuadro de la etiqueta padre. jQuery Por ultimo usaremos jQuery para hacer una visualizacion de la ruta y nombre archivo en un span Resultado Final Puedes revisar el código completo aquí : jsfiddle

    Re-abierto

    el Reiz, Re-abierto y con nuevas novedades. Un blog donde publicare por lo menos 2 veces al mes código, Log de desarrollos, herramientas, rebién de juegos, Tibs y consejos entre otras cosas, mas ilustraciones, mas tiras cómicas y un nuevo apartado para el inicio.

    Diseño en el infierno

    Mi blog

    Este Blog tiene por objetivo el de publicar avances de mis desarrollos tanto en juegos como en softwares y del publicar herramientas que puedan ayudar a la comunidad de desarrolladores, algunos tutoriales y herramientas de libre uso como por ejemplo seria InkScape o Blender, así también el de publicar códigos que puedan ser de utilidad hechos por mi o sacado de algún sitio colocando sus respectivas fuentes.