Índice

La composición de los campos de texto

Puede usar todas las propiedades CSS vistas para la composición de los caracteres, los textos y los contenedores.

1. La composición de las etiquetas

En este ejemplo hemos utilizado el selector de etiqueta <label> para que todas las etiquetas tengan la misma composición: negrita con espacio complementario de 1 píxel entre las letras.

images/16OWT-02.png

El selector de etiqueta <body> tiene un tamaño de 0.8em y la fuente Verdana.

images/16OWT-03.PNG

Esos estilos se utilizarán en los ejemplos que siguen.

2. La composición de los campos de texto Línea simple

Algunos campos de texto tienen un fondo de color, un borde y una fuente de color y un ancho fijo de 150 píxeles. La clase utilizada se llama .campoSimple.

images/16OWT-04.PNG

En el siguiente ejemplo puede ver la composición de las etiquetas vistas anteriormente.

images/16OWT-05.png

3. La composición del campo de texto multilínea

Para los campos de texto multilínea, usamos una imagen de fondo, repetida verticalmente y fija para que la imagen no se desplace al usar la barra de desplazamiento. El campo posee un ancho y un alto fijos y un borde.

images/16OWT-06.PNG

4. La composición de los grupos de campos

Para los grupos de botones de opción y casillas de verificación, hemos usado los selectores de etiqueta <fieldset> (el recuadro) y <legend> (título del recuadro).

Las propiedades CSS utilizadas para <fieldset>:

images/16OWT-07.PNG

Las propiedades CSS usadas para <legend>:

images/16OWT-08.png

Esta es una vista previa en el navegador:

images/16OWT-09.png