form - input html

Valores CSS predeterminados para un fieldset<legend>

Question

Estoy tratando de usar un <legend> como título dentro de un <fieldset> .

En los navegadores que no sean IE, la <legend> se coloca en el borde superior del <fieldset> , con el texto perfectamente centrado en la línea.

Estoy intentando restablecer su posición para que se sienta como cualquier otro elemento. es decir, un <h3> .

Aquí está el CSS que tengo hasta ahora.

fieldset legend {
    margin: 0;
    padding: 0;
    position: static;
    border: 0;
    top: auto; left: auto;
    float: none;
    display: block;
    font-size: 14px;
    line-height: 18px;
}

Pero la leyenda sigue perfectamente centrada en la línea.

Sí, puedo agregar un margen / relleno / coordenada superior, pero quiero saber si el navegador tiene valores predeterminados para el elemento que activa este diseño. Quiero entonces, anular estos valores.

Probado en Firefox (3.6.10), Chrome (6.0.472.63), Safari (5.0.2)

Actualización Dejaré esta pregunta abierta por una semana más, en caso de que alguien haya podido <legend> elementos de <legend> . Si no se encuentran soluciones, aceptaré la respuesta de @jnpcl.

Answer 1

Acabo de diseñar mi <legend> al darles una position: absolute; top: -25px; position: absolute; top: -25px; y el <fieldset> con una position: relative; padding-top: 30px; position: relative; padding-top: 30px;

Answer 2

De acuerdo con la especificación, aquí está el estilo predeterminado de los elementos de fieldset y de legend . Al restablecer esas propiedades, puede tener un elemento de legend limpio con el que trabajar.

Answer 3

Esto es suficiente :

 form legend{
    float: left;
    width: 100%;
 }

Answer 4

Según HTML - Living Standard , los siguientes estilos funcionan como predeterminados:

fieldset {
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    border: groove 2px ThreeDFace;
    padding-block-start: 0.35em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    padding-inline-start: 0.75em;
    min-inline-size: min-content;
}

legend {
    padding-inline-start: 2px; padding-inline-end: 2px;
}

Answer 5

https://web.archive.org/web/20140209061351/http://tjkdesign.com/articles/how_to_position_the_legend_element.asp

En pocas palabras, no es posible en todos los navegadores colocar el elemento LEGEND en un Fieldset.

Solución alternativa: ajuste el texto de <legend> en un <span> y luego vuelva a colocar <span> .