Me preguntaron cómo personalizar una forma gráfica, incluyendo una caja de búsqueda como el que en este blog. La técnica utilizada, o mejor que yo uso, es obviamente válido para cualquier tipo de forma de módulo. Lo que cambia es sólo la complejidad del trabajo a realizar en función de la complejidad de la misma forma.
Los Fundamentos
A través de las hojas de estilo, usted puede modificar totalmente el diseño de cualquier tipo de módulo. Uno de los obstáculos que pueden surgir, como sucede a menudo, se relaciona con la compatibilidad con diferentes navegadores en el mercado y con resultados finales distintos para su navegador.
Por esta razón, a menudo, se opta por una solución sustancialmente gráficos, imágenes que son explotados para redefinir el diseño del formulario. Las imágenes, de hecho, son las únicas entidades que, salvo casos rai hasta la fecha siempre se muestran de la misma en todos los navegadores.
No hay imágenes
Antes de ver cómo modificar el diseño de un formulario con la imagen, vemos lo que "podría" se puede hacer con sólo CSS. Un módulo se hace en la forma de los casos por tribunales maggiornza INPUT . Sin embargo lo que vemos es, en general, se aplican a cualquier campo de formulario de otro. El uso de CSS podemos redefinir el aspecto de nuestro campo INPUT que actúe en su tamaño, en el borde, el fondo, el tipo de letra, etc ...
Por ejemplo, puede mejorar el rendimiento simplemente poniendo:
1 2 3 4 5 6 | input { 1px solid #aaa ; border: 1px solid # aaa; 4px ; padding: 4px; 200px ; ancho: 200px; 12px ; font-size: 12px; } |
Mozilla Firefox y Safari también le permiten ajustar fácilmente la redondez de los bordes (véase también el CSS3: ¿alguien ha visto el Internet Explorer )
1 2 3 4 5 6 7 8 | input { 1px solid #aaa ; border: 1px solid # aaa; 4px ; padding: 4px; 200px ; ancho: 200px; 12px ; font-size: 12px; ; -Moz-border-radius: 6px; ; -Webkit-border-radius: 6px; |
Además, podemos insertar una imagen como fondo, para que sea más "accesible" el significado de la propia materia:
1 2 3 4 5 6 7 8 9 10 11 | input { 1px solid #aaa ; border: 1px solid # aaa; 4px ; padding: 4px; 200px ; ancho: 200px; 12px ; font-size: 12px; ; -Moz-border-radius: 6px; ; -Webkit-border-radius: 6px; url ( images/icon.png ) no-repeat ; background: url (imágenes / icon.png) no-repeat; 20px ; padding-left: 20px; |
permettiamo di posizionarla all'inizio del campo ma fuori dal testo. Si icon.png icono es de 16 píxeles de ancho, a través del padding le gustaría estar en el principio del campo pero fuera del texto.
Las imágenes en el formulario
El último ejemplo visto conduciría a una solución sencilla cuando nos decidimos a hacer el diseño de nuestro campo INPUT completamente en los gráficos. De hecho, en teoría, ser suficiente para eliminar el borde del campo e insertar una imagen de fondo directamente en el campo INPUT :
1 2 3 4 5 6 7 | input { none ; la frontera: none; 4px ; padding: 4px; 200px ; ancho: 200px; 12px ; font-size: 12px; url ( images/custominput.png ) no-repeat ; background: url (imágenes o custominput.png) no-repeat; |
Digo en teoría porque mientras que esta técnica funciona (véase Firefox), y el otro produce efectos extraños en otro navegador (Microsoft Internet Explorer).
: Para esperar el obstáculo se convierte en terreno completamente transparente INPUT y la imagen se asignan directamente a la etiqueta FORM :
1 2 3 4 5 6 7 8 9 10 11 12 13 | input { none ; la frontera: none; none ; background: none; 4px ; padding: 4px; 200px ; ancho: 200px; 12px ; font-size: 12px; } forma { block ; display: block; 200px ; ancho: 200px; 24px ; altura: 24px; url ( images/custominput.png ) no-repeat ; background: url (imágenes o custominput.png) no-repeat; } |
Todo con un "marcado" HTML como este:
1 2 3 |
Dependiendo de la elección de los gráficos y la complejidad de la forma, sólo es necesario para "acumular" correctamente, y luego colocar el campo INPUT imagen como el fondo de la forma de colocar a continuación. Esto es posible con los márgenes apropiados en el campo INPUT misma, para que coincidiera con nuestro diseño:
1 2 3 4 5 6 7 8 9 10 | input { none ; la frontera: none; none ; background: none; 4px ; padding: 4px; 200px ; ancho: 200px; 12px ; font-size: 12px; 12px ; margin-top: 12px; 24px ; margin-left: 24px; } |
Excelente, como de costumbre. ¿Cómo personalizzeresti un archivo de entrada? Este artículo es muy bonito, pero cuando quiero algo de encargo tienden a utilizar pequeños botones hechos en flash.
@ Napolux:
Un campo de archivo de entrada no se pueden personalizar directamente, como lo demuestra el vínculo que me dejaste. Flash es la solución más ampliamente adoptado, aun cuando la película flash se oculta y el diseño se hace a través de un campo simple
INPUT, o en su totalidad en los gráficos, y se dispara en los archivos seleccionados a través de las comunicaciones Javascript -> Flash. La selección de archivos, por supuesto, el proceso opuesto; flash -> JavaScript.Por otra parte, el flash solución de permitirse el lujo de apoyar a la selección múltiple, así que creo que una opción muy válida, a menos que contra-apropiado (véase, por ejemplo el servidor de WordPress cuando se carga un medio de comunicación, sólo tiene que utilizar Flash).
(alias Ajax) non era ancora noto… De lo contrario - como se muestra en el enlace que dejó en los comentarios - un completo HTML dell'artifizio obliga al uso de archivo oculto campo de entrada ... que me recuerda mucho el uso de
IFRAMEcuando el objetoHTTPRequest(también conocido como Ajax) no fue conocido ...[...] 06) Personalización de un formulario de forma gráfica [...]
No campos personalizables de entrada?
perdón, o me he perdido algo o en todo caso algo no está bien porque las propiedades son personalizabili.
¿Qué se hace referencia?
@ Francodane: Yo nunca dije que los campos
inputno se pueden personalizar. El campoinputtipo de archivo, sin embargo, es una excepción ... esto no es personalizable en el sentido de que muestra un diseño completamente diferente dependiendo del navegador. Para otros, sin embargo, la regla de la compatibilidad ... o, personalizar lo que quieras, pero comprobar el resultado en todos los navegadores.