Saltar la navegación

Ubicación de la leyenda

El elemento <legend> está bien para darle estilo, pero puede ser un poco complicado controlar su ubicación. De forma predeterminada, siempre se coloca sobre el borde superior de su padre <fieldset>, cerca de la esquina superior izquierda. Para colocarlo en otro lugar, por ejemplo, dentro del conjunto de campos en algún lugar, o cerca de la esquina inferior izquierda, debe confiar en el posicionamiento.

Tome el siguiente ejemplo:

Para posicionar la leyenda de esta manera, usamos el siguiente CSS (otras declaraciones eliminadas por brevedad):

El <fieldset> también debe posicionarse, de modo que <legend> se posicione en relación con él (de lo contrario, <legend> se ubicaría en relación con <body>).

El elemento <legend> es muy importante para la accesibilidad; las tecnologías de asistencia lo hablarán como parte de la etiqueta de cada elemento de formulario dentro del conjunto de campos, pero usar una técnica como la anterior está bien. El contenido de la leyenda aún se pronunciará de la misma manera; es sólo la posición visual la que ha cambiado.

Nota:

También puede usar la propiedad transform para ayudar a posicionar su <legend>. Sin embargo, cuando lo coloca, por ejemplo, con un transform: translateY();, se mueve pero deja un feo espacio en el borde del <fieldset>, del que no es fácil deshacerse.