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

Un elemento de formulario usado para etiquetar campos y áreas de entrada en un formulario web es el elemento label. Puede estilizarse usando reglas de Hojas de Estilo en Cascada (CSS).

Paso 1

Para estilizar los elementos label como aparecen en la imagen de introducción, necesitas usar el elemento label con el atributo "for". Además, debes cerrar el elemento label antes de agregar el elemento "input". El HTML del formulario completo se muestra en la ilustración.

Paso 2

Para estilizar los labels, hice que se muestren como elementos de bloque, flotados a la izquierda. Asigné un ancho para que los campos de entrada estén a distancia uniforme de las etiquetas. Asigné color y negrita. Usé contenido generado para agregar dos puntos (:) después de la etiqueta (puede no aparecer en todos los navegadores).

CSS:

label { color: #B4886B; font-weight: bold; display: block; width: 150px; float: left; }
label:after { content: ": " }

Paso 3

Por completitud, también muestro el CSS para el fieldset, ya que los labels están encerrados por un fieldset con borde.

CSS:

fieldset { border: 1px solid #CCA383; width: 400px; background: #FFE8EF; padding: 3px; }
fieldset legend { background: #CCA383; padding: 6px; font-weight: bold; }

Paso 4

Podrías hacer muchas otras cosas para estilizar labels. Mi ejemplo es solo una forma.