Foros del Web » Creando para Internet » CSS »

Maquetación de botón "Adjuntar Archivo"

Estas en el tema de Maquetación de botón "Adjuntar Archivo" en el foro de CSS en Foros del Web. Hola, Hace tiempo que realicé una sustitución de botones para envió y borrado en formularios para poner botones según el estilo de la web en ...
  #1 (permalink)  
Antiguo 16/09/2011, 15:57
 
Fecha de Ingreso: noviembre-2005
Mensajes: 889
Antigüedad: 18 años, 5 meses
Puntos: 8
Maquetación de botón "Adjuntar Archivo"

Hola,

Hace tiempo que realicé una sustitución de botones para envió y borrado en formularios para poner botones según el estilo de la web en el formulario que me conviene.

Así, imaginad este final de formulario con los típicos botones de enviar y borrar:

<div id="aaa">
<input type="submit" name="enviar" value="enviar" />
</div>
<div id="bbb">
<input type="reset" name="reset" value="reset" />
</div>

Yo lo maqueto así y me funciona:

#aaa input, #bbb input {
WIDTH: 49px;
HEIGHT: 11px;
TOP: 0px;
LEFT: 138px;
BORDER: none;
TEXT-INDENT: -9999px;
BACKGROUND: url('Enviar.gif') top;
}
#aaa input:hover {
BACKGROUND: url('Enviar.gif') bottom;
}
#bbb input {
WIDTH: 54px;
LEFT: 201px;
BACKGROUND: url('Borrar.gif') top;
}
#bbb input:hover {
BACKGROUND: url('Borrar.gif') bottom;
}

Sin problemas.

Pero ahora me meto en un formulario que tiene un botón para adjuntar el archivo que vayas a enviar, con este input:


<input <? if (isset ($flag) && $ext=='error' || $tamano > $maximo_tamano) { echo 'class="error"';} else {echo 'class="campo"';} ?> type="file" name="archivo" value="<? echo $_FILE['archivo'];?>" />

Sale una zona donde dice el archivo que has adjuntado, y al lado un botón.

En Chrome me sale "Seleccionar archivo" y en Internet Explorer "Adjuntar".

Supongo que en otros dirá otra cosa.

En fin, no puedo maquetarlo de ninguna manera, porque no sé que elemento es el que debe formar la regla.

Si pongo lo de arriba, se ve afectada toda la zona sobre la que está ese botón.

Me gustaría saber si alguno se ha enfrentado antes a este dilema.

Un saludo y gracias.
  #2 (permalink)  
Antiguo 21/09/2011, 14:47
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Maquetación de botón "Adjuntar Archivo"

No me detuve a estudiar a fondo tu problema, pero si haces tus propios botones, les puedes poner un escript que "clickee" a los verdaderos, que estarán ocultos.
  #3 (permalink)  
Antiguo 22/09/2011, 11:00
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 10 meses
Puntos: 269
Respuesta: Maquetación de botón "Adjuntar Archivo"

hace un tiempo me enfrente al mismo problema, al final desistí y no lo avancé pero hice esto con javascript, en esa época mi manejo de js era super básico y fué lo mejor que pude hacer. Supongo que se lo puede mejorar usando alguna librería para que sea compatible con todos los navegadores.
Espero te sea útil aunque sea como punto de partida.

Lo peor es que no solo los campos input:file son un horror de personalizar sino que la nueva especificación html5 incorpora nuevos elementos de formulario (sliders, calendars, etc) que por su nivel de complejidad para tratarlos con css uno prefiere seguir usando los componentes de jquery ui por ejemplo o similar. Me llama la atención como descuidan tanto este tema.
  #4 (permalink)  
Antiguo 22/09/2011, 15:58
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Maquetación de botón "Adjuntar Archivo"

Esteeee...

Cierto. Ahora me acuerdo que el input type=file no se podía "cambiar" en cualquier navegador. No pude ver tus ejemplos, cristian_cena, pero supongo que tu comentario tiene que ver con eso. Gracias por la aclaración.

Lo siento, JUMASOL, debí poner los enlaces a temas donde hicimos las pruebas; entonces lo hubiese visto y no te respondía cualquier cosa
  #5 (permalink)  
Antiguo 22/09/2011, 16:04
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 10 meses
Puntos: 269
Respuesta: Maquetación de botón "Adjuntar Archivo"

furoya, en este link estan los archivos si quieres verlo (y de paso mejorarlo jaja). abrazo
  #6 (permalink)  
Antiguo 23/09/2011, 06:30
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Maquetación de botón "Adjuntar Archivo"

Sí, sí, ya sé. El problema es que uso máquinas públicas que no me dejan ver sitios de descarga. Y mucho menos bajar los documentos y comprimidos.

Recién subí archivos usando una PC prestada y ahora no puedo editar las descripciones porque no puedo entrar desde ésta a megaplod. :P

En cuanto pueda, los miro.

Abrazo.
  #7 (permalink)  
Antiguo 30/09/2011, 07:54
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Respuesta: Maquetación de botón "Adjuntar Archivo"

Ya los pude bajar; aunque no tuve tiempo de revisar el código pude ver que anda en Chrome ( que normalmente no reconoce el click() ) pero no en Firefox.
De cualquier forma, recordé dónde estaba una versión que enlazó kemie y que parece estar actualizada. El método es bastante poco ortodoxo y a más de uno le daría vergüenza publicarlo ... pero si funciona, está bien.

Se me ha sublevado un Input File... no quiere que lo cambie de color completamente

Para no levantar aquel tema de nuevo, hago un par de comentarios acá sobre presunciones sobre ese truco : por un lado, la transparencia en algunos navegadores también impide los eventos de ratón, y entonces el "truco del truco" sería una opacidad del 1%, que en la práctica es transparencia pero para el browser el objeto todavía existe en pantalla. Por el otro, no siempre se puede cambiar el tamaño del input type=file , y si no coinciden el alto y ancho de los botones en algún caso el click no va a ser efectivo.

Veamos si aún así te sirve, JUMASOL.

Un offtopic : estuve mirando los nuevos input type y la mayoría sirven como validadores, pero me llamó la atención el de colores; creí que era para seleccionarlos, como la herramienta que viene en el IE, pero lo probé y no lo entiendo. Quizá debería verlo en Opera, que es quien mejor los soporta, pero no tengo ninguno a mano.

http://www.htmlcinco.com/nuevos-tipo...nput-en-html5/

http://www.w3schools.com/html5/html5...nput_types.asp

Edición :

Ya los vi, y algunos están muy buenos. Hace años teníamos que hacer milagros para lograr loa que ahora se hace con una propiedad. Así cualquiera hace páginas web.

Probé de nuevo el ejemplo que tienes en el comprimido, cristian_cena. Ahora me anda en Firefox. No sé qué pudo pasar.
Vi mejor el CSS y resulta que también usaste el truco de la transparencia, y comprobé que los navegadores ya no ignoran una opacidad '0'. Si todo el mundo lo hace así, quizá es la mejor manera de hacerlo, y punto.

"Si funciona, no lo arregles."

Última edición por furoya; 09/10/2011 a las 11:29 Razón: No agregar post seguidos.

Etiquetas: adjuntar, chrome, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:18.