Ver Mensaje Individual
  #1 (permalink)  
Antiguo 31/08/2010, 05:02
Avatar de pann84
pann84
 
Fecha de Ingreso: agosto-2010
Ubicación: Asturias - Madrid
Mensajes: 95
Antigüedad: 14 años, 3 meses
Puntos: 4
input file, problemas con el javascript y su apariencia

Muy buenas a todos y gracias por molestaros en leerme. Pensaba que este sería un problema de estilos pero ahora que he encontrado la solución 'o eso creo' parece que es en el javascript donde me atasco, y es que no tengo apenas ni idea (por no decir nada) de javascript. Os explico:

El diseñador me pasó un formularo con un campo <input type="file" /> de un diseño bastante determinado, el que se ve en la imagen que sigue:


Estuve tocando el CSS para modificar el estilo de este campo, pero no me fue posible, pues parece ser que los navegadores no permiten que se modifiquen estos campos por motivos de seguridad. Pero como hecha la ley, hecha la trampa, yo seguí buscando otras posibles vías para modificar la apariencia de este campo.

Me encontré con muchas y muy variadas soluciones, pero no completas. Lo que yo pretendía que el susodicho campo hiciese es lo normal en un campo file, que apareciese la ruta del archivo que el usuario acababa de insertar a la izquierda o que pudiese insertar la ruta a mano, y que el botón tuviese ese diseño de letra blanca y gris, con un hover. Pero no encontraba nada que hiciese algo así. Hasta que dí con la siguiente web:
[URL="http://www.albertlanchas.com/articulos/dar-estilo-a-un-boton-input-file"]http://www.albertlanchas.com/articulos/dar-estilo-a-un-boton-input-file[/URL]

Hace perfecta y exactamente lo que necesito, el problema es que soy incapaz de modificar de modo útil el diseño. Si toqueteo el CSS resulta que aunque cambia la apariencia, el botón no se corresponde con la imagen, y no soy capaz de que ya de mano aparezca un texto concreto.

Como podéis ver utilizan una galería de jquery, y por lo que he visto, tocan también desde ahí el aspecto, y yo por ahí ya me pierdo, si pudieseis indicarme, como cambiar la posición del botón para que esté a la derecha y no a la izquierda del campo que contiene la ruta del archivo como en la foto, y cómo hacer que de mano ya aparezca el texto 'Envía tu CV desde tu equipo' para desaparecer al insertar el archivo, os lo agradecería mucho. Pues yo en estos mundos javascriptianos me pierdo.

No os pongo el código, porque en la web que os puse ya viene todo listo para bajar, pero si no queréis bajarlo o lo que sea yo lo pongo sin ningún problema.

Espero haberme explicado

Muchas gracias de antemano