Estilos en formularios: Bordes llamativos para campos de formulario en CSS

La especificación CSS2 incluye la posibilidad de modificar los estilos de los bordes de los objetos de una página. Una aplicación básica consiste en la modificación de los estilos de los bordes de los campos de formularios, para personalizarlos o adaptarlos al diseño de la página.

Lo único que hay que hacer es asignar el valor deseado a la propiedad border. Esta propiedad permite modificar el grosor, estilo y color del borde de un elemento HTML. Los valores permitidos para el grosor son thin, medium y thick, mientras que para el estilo son válidos none, dotted, dashed, solid, double, groove, ridge, inset y outset.

Para usar los estilos del ejemplo, basta con incluir el atributo class con el nombre del estilo.

El soporte de CSS2 todavía no es completo en la mayoría de navegadores, por lo que estos estilos pueden no visualizarse.

Este código debe ir entre las tags <head> y </head> de la página:

<STYLE TYPE="text/css">
/* BORDES LLAMATIVOS PARA CAMPOS DE FORMULARIO
Iván Nieto Pérez
Este script y otros muchos pueden
descarse on-line de forma gratuita
en El Código: www.elcodigo.net

Posibles valores para border:
grosor: thin | medium | thick
estilo: none | dotted | dashed | solid | double | groove | ridge | inset | outset
color: cualquiera valido
*/
.formulario1
{
border: thin dotted #2D7C0B;
}

.formulario2
{
border: thick dashed #2D7C0B;
}

/* Uso:
<p><form>
Ejemplo 1<br><input type="text" size=5 class="formulario1"><br><br>
Ejemplo 2<br><input type="text" size=5 class="formulario2">
</form></p>
*/</STYLE>

Autor: Pagina Digital
http://www.paginadigital.com.ar/servicios/diseno-paginas-web_det.asp?IdArticulos=4

Usuarios que han visto este tema también han visto...

- Arreglar los bordes punteados en Internet Explorer con CSS
- Cómo eliminar el subrayado de los enlaces con CSS
- Hacks CSS
- Espacios en blanco con CSS
- Mozilla: navegador centrado en el usuario

- Versión imprimible de este documento

- Enviar por e-mail este documento