Mejorando la apariencia de los formularios utilizando CSS
Escrito por Mauro Rondinelli el Miércoles 12 de Diciembre de 2001 a las 00:00hs
Por lo general los formularios son bastante vulgares y lo peor aun muchas veces no encajan con el diseño que tiene nuestro sitio, entoces para mejorar el aspecto de estos por que no usar hojas de estilo (CSS), en este articulo veremos como hacerlo.
Un formulario por lo general se ve asi...
El diseño que el navegador le da a los controles es el mismo que el del sistema operativo, en el caso del grafico de arriba es Windows, el problema surge cuando tenemos una web con un diseño muy cuidado y nos toca agregar formularios los cuales no concuerdan para nada con el diseño del sitio, para ello lo mejor que podemos hacer es utilizar CSS.
El CSS
<style type="text/css">
<!--
input { font-family: Tahoma, Verdana, Arial; font-size: 11px; color: #FFFFFF; background-color: #6699CC; border: #000099; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
select { font-family: Tahoma, Verdana, Arial; font-size: 11px; color: #FFFFFF; background-color: #6699CC; border: #000099; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
-->
</style>
Este bloque de codigo va entre las etiquetas <HEAD> Y </HEAD> de la pagina que contrendra el formulario, fijense que "input" viene seguido por todo en codigo encerrado entre llaves, bueno, ese es el codigo es el que le va dando el formato a los cuadros de texto y a los botones, todo el codigo que pertenece a "select" le da el formato a la lista desplegable (Pais).
Aspecto Final
Si se fijan bien es muy facil modificar manualmente los valores, por ejemplo donde dice "background-color: #6699CC;" pueden modificar el valor hexadecimal #6699CC por #000099 y les quedaria el fondo de los controles color azul.
Es cuestion de ir investigando de que se trata cada propiedad, igual todos los editores webs traen incorporado algun editor de CSS asi que tampoco se rompan la cabeza.
comentarios
-
gracias al q se tomo el tiempo por hacer la pag, solo una dudita, que hago si para poder ver esto en firefox y otros navegadores?? intente lo de !important pero no cambio nada, gracias de cualkier forma
-
window.location = "http://www.google.com/"
-
Muslim Items :
298274818336917502974 From the official [URL=http://www.onlinemuslimitems.com/]Muslim Abaya[/URL] website of anticipated [URL=http://www.onlinemuslimitems.com/]Muslim Items[/URL] Star Wars The [URL=http://www.onlinemuslimitems.com/]Muslim hijab[/URL] Old Republic comes [URL=http://www.onlinemuslimitems.com/]Islamic abaya[/URL] this new video where the [URL=http://www.onlinemuslimitems.com/]Muslim scarf[/URL] game designers [URL=http://www.onlinemuslimitems.com/]Buy Muslim Abaya[/URL] tell us a little about [URL=http://www.onlinemuslimitems.com/]Cheap Muslim Abaya[/URL] the 2 different [URL=http://www.onlinemuslimitems.com/]Buy Muslim Items[/URL] classes find Sith characters [URL=http://www.onlinemuslimitems.com/]Cheap Muslim Items[/URL] in the game, The [URL=http://www.findnike.com]Islamic hijab[/URL] Inquisitor Sith [URL=http://www.onlinemuslimitems.com]Islamic scarf[/URL] and Sith Warrior. They explain a lot of [URL=http://www.onlinemuslimitems.com]Islamic Items[/URL] pictures as designed [URL=http://www.onlinemuslimitems.com]Muslim wear[/URL] these characters and [URL=http://www.onlinemuslimitems.com]Muslim clothing[/URL] their characteristics [URL=http://www.onlinemuslimitems.com]Muslim wear Pas Cher[/URL] one more devoted [URL=http://www.onlinemuslimitems.com]Muslim wear[/URL] to the use of force [URL=http://www.onlinemuslimitems.com]Muslim clothing[/URL] powers and one more [URL=http://www.onlinemuslimitems.com/]Muslim Items For Sale[/URL] dedicated to close combat.
-
En lugar de repetir lo mismo para el input y el select puede quedar así:
input, select, textarea {
font-family: Tahoma, Verdana, Arial;
font-size: 11px;
color: #FFFFFF;
background-color: #6699CC;
border: #000099;
border-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px
}
asi evitamos repetición de código innecesario. -
Que bueno Robinson, muchas gracias por tu documentación.
Saludos. -
CON EL MISMO PROBLEMA DE LAS INCOPATIBILIDADES DE IE Y FIREFOX..... MIREN LO QUE ME ENCONTRE PARA QUITARNOS ESE PROBLEMA.
Hack CSS para Internet Explorer 7
Particularmente soy bastante reacio a utilizar hacks CSS en mis diseños, principalmente porque me gusta que validen, aunque como sabemos que no lo hagano cambia en anda el aspecto visual en el navegador. Sin embargo, creo que es bueno conocerlos por si en algún momento sea necesario utilizarlos.
Con la última versión de Internet Explorer, es decir, la 7, los diseñadores tenemos un nuevo problema ya que no todo se ve igual que en Firefox ni que en IE6, por lo que a veces es necesario realizar modificaciones sólo para este navegador. Un hack conocido es el de colocar un asterisco delante de la propiedad CSS y así sólo será reconocida por Internet Explorer 6 y 7. Algo así:
body {
background: #fff; /* Todos los navegadores */
*background: #000; /* IE6 e IE7 */
}
Es decir, en Firefox, Opera y los demás navegadores el fondo será blanco, pero en Internet Explorer 6 y 7 el fondo será negro, ya que lee la propiedad con el asterisco, cosa que los demás navegadores pasan por alto. Es importante la ubicación, es decir, la propiedad con el asterisco debajo de la normal (respetando la cascada).
Otra opción que se utiliza para dar diferentes estilos a navegadores es el uso de !important lo cual es aceptado por Firefox, IE7 y los demás navegadores, pero no por IE6. Por lo que se utiliza cuando no queremos dar cierta propiedad a IE6. Lo bueno de esto es que si valida y así se usa:
body {
background: #fff !important; /* Firefox, IE7 y los demás */
background: #000; /* IE6 y anteriores */
}
Firefox, IE7, Opera, Safari y los demás tendrán fondo blanco, pero IE6 tendrá fondo negro. Ahora para crear un hack exclusivo para IE7 combinamos estas dos técnicas que hemos repasado. Es decir, agregando un asterisco e !important a la propiedad. Lo hacemos de la siguiente manera:
body {
background: #fff !important; /* Firefox y los demás */
*background: #000 !important; /* Sólo IE7 */
*background: #ccc; /* Sólo IE6 */
}
De esta forma podremos lograr 3 estilos direfentes dependiendo el navegador que estemos usando, es decir, en el primer caso, Firefox y los demás navegadores tendrán fondo blanco, Internet Explorer 7 fondo negro e Internet Explorer 6 fondo gris. -
No es imposible cambiar el estilo de un select. Bueno.. al menos con ese codigo si, pero podria hacerse una clase para ello.
.miclase{
/* aqui las propiedades */
}
Hola mundo
Si no funciona eso, entonces modificar el estilo de los option, en vez del select.
Saludos desde Costa Rica. Muy bueno el sitio (Y) -
Estoy de Acuerdo con James, pues la Etiqueta SELECT es imposible de modificar al Igual que la Etiqueta MENU, no tienes las mismas propiedades que input o text, etc. Pero de Todas maneras el codigo es un gran aporte
-
Muy bonito!! Pero darle estilo a un SELECT en IE es imposible, sólo hace caso a la propiedad border en el Mozilla
-
FERNANDO:
esta muy bueno y muy bien explicado el ejemplo de estilos para php, es de gran utilidad encontrar ejemplos como estos.
-
exelente
