Cómo aplicar estilo a una etiqueta de formulario con CSS

Cómo diseñar una etiqueta de formulario con CSS. Un elemento de formulario que se utiliza para etiquetar los diversos campos y áreas de entrada en un formulario de página web es el elemento de etiqueta. Se puede diseñar usando las reglas de la hoja de estilo en cascada.

Paso 1

Para diseñar los elementos de la etiqueta de la forma en que aparecen en la imagen de la introducción, debe usar el elemento de la etiqueta con el atributo "para". Además, debe cerrar el elemento de etiqueta antes de agregar el elemento de "entrada". El HTML para el formulario completo se muestra en la ilustración.

Paso 2

Para diseñar los elementos de la etiqueta, hice que las etiquetas se mostraran como elementos de nivel de bloque, que flotaban hacia la izquierda. Luego asigné un ancho a las etiquetas para que todos los campos de entrada estuvieran a una distancia uniforme de las etiquetas. Asigné un color y puse el texto en negrita. Usé contenido generado para agregar dos puntos (:) después de la etiqueta. (Es posible que los dos puntos no aparezcan en todos los navegadores).

Aquí está el CSS:

etiqueta {color:#B4886B; fuente-peso:negrita; bloqueo de pantalla; ancho:150px; flotador izquierdo; } etiqueta:después de { contenido:":" }

Paso 3

Solo para completar, también le mostraré el CSS utilizado para diseñar el conjunto de campos, ya que los elementos de la etiqueta están encerrados en un conjunto de campos bordeado.

Aquí está ese CSS:

fieldset { borde:1px sólido #CCA383; ancho:400px; fondo:#FFE8EF; relleno:3px; } Leyenda del conjunto de campos { Antecedentes:#CCA383; relleno:6px; fuente-peso:negrita;

Paso 4

Podría hacer muchas otras cosas para diseñar los elementos de la etiqueta. Mi ejemplo es solo una forma de hacerlo.