Cómo cambiar el estilo de una etiqueta de formulario con CSS

Escrito por ehow contributor | Traducido por juliana star
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo cambiar el estilo de una etiqueta de formulario con CSS
Un formulario con etiquetas estilizadas.

Cómo cambiar el estilo de una etiqueta de formulario con CSS. Un elemento de formulario que se usa para etiquetar los diferentes campos y áreas de escritura de una página web es el elemento etiqueta. Puedes cambiar su estilo usando las reglas de las hojas de estilo en cascada.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Necesitarás

  • Conocimiento práctico de HTML
  • Conocimiento práctico de CSS

Lista completaMinimizar

Instrucciones

  1. 1

    Para cambiar el estilo de los elementos etiqueta y lograr que se vean de la forma en la que aparecen en la imagen de la introducción necesitas usar el elemento etiqueta con el atributo "for". Por otra parte necesitas cerrar el elemento etiqueta antes de agregar el elemento "input" en sí. El código HTML para el formulario completo se muestra en la ilustración.

  2. 2

    Para cambiar el estilo de los elementos etiqueta hice que estos aparecieran como elementos de nivel de bloque flotando a la izquierda. Luego asigné una ancho a las etiquetas para que todos los campos de escritura estuvieran a una distancia uniforme de las etiquetas. Asigné un color y puse el texto en negritas. Usé contenido generado para agregar dos puntos ( : ) después de la etiqueta (los dos puntos quizá no aparezcan en todos los navegadores).

    Aquí está el CSS:

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

  3. 3

    Solamente para complementar también te mostraré el CSS usado para darle estilo al 'grupo de campos', dado que los elementos etiqueta están rodeados por un 'grupo de campos' con borde.

    Aquí se encuentra ese CSS:

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

  4. 4

    Puedes hacer muchas otras cosas para cambiar el estilo de los elementos etiqueta. Mi ejemplo solamente es una manera de hacerlo.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles