Cosas web, algunas úles, algunas buenas.
Fushioko, tiendas de productos de Asia

lunes, febrero 20, 2006

Modificar el texto del botón de un input="file"

Cuando he estado trabajando en proyectos multi-lenguaje, normalmente piden que el botón del input file tenga el texto que ellos quieren, normalmente traducido al idioma correspondiente y no en inglés. Mi respuesta sería que el texto del botón no se puede modificar y si te viene en inglés es porque quizás el resto del navegador también está en inglés. El tema es que te dicen que el mismo navegador puede ser usado por personas que usan distintos idiomas. ¿Mi respuesta?: "mala suerte, es lo que hay".
A parte de ser un tanto borde, el motivo real es no complicarse la vida. El texto no se puede cambiar y lo único que se puede hacer es simularlo. En Quirksmode se explica una forma de hacerlo que para mí es impresionante, como el resto de su página, que te recomiendo que leas.

El método que usa es el siguiente, escribe una caja de texto y al lado un botón (por ejemplo una imagen con el texto que queremos), y encima de ello, tapándolo, escribe el input="file". Por ahora no se consigue nada, porque se sigue viendo el input file y el texto sigue siendo el mismo. Lo que hace a continuación es volver transparente (opacity: 0) el input file, por lo que ya se vería el input file que nosotros hemos diseñado y no el original. ¿Por qué transparente?, porque si se hace invisible (visibility: hidden) o simplemente no se muestra (display: none), no se tiene acceso a él mediante el ratón, por lo que no se podría hacer click en el botón y que nos mostraría la ventana de selección del archivo (en IE si se puede abrir esa ventana con el evento click(), pero en Firefox no se puede por razones de seguridad). Cuando un objeto es transparente, podemos usarlo (hacer click, ...), mientras que en los otros dos casos no se puede.
El resultado final es que vemos un input file que nosotros hemos diseñado, y cuando pinchamos en él, lo que realmente hacemos es pinchar en el original que no vemos porque está transparente. La única pega que le veo es que la propiedad opacity no lo admiten todos los navegadores, e incluso hay que usar distintos estilos según sea el navegador.
Visto en: Quirksmode.

1 Comentarios:

Publicar un comentario

<< Inicio