Значения CSS по умолчанию для набора полей <legend>

Я пытаюсь использовать <legend> как заголовок внутри <fieldset>.

В браузерах, отличных от IE, <legend> располагается на верхней границе <fieldset>, причем текст идеально расположен по центру.

Я пытаюсь reset позиционировать его так, чтобы он сидел точно так же, как и любой другой элемент. т.е. a <h3>.

Здесь CSS, который у меня есть.

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

Но легенда по-прежнему полностью сосредоточена в строке.

Да, я могу добавить координату margin/padding/top, но я хочу знать, есть ли у браузера значения по умолчанию для элемента, запускающего этот макет. Затем я хочу переопределить эти значения.

Протестировано в Firefox (3.6.10), Chrome (6.0.472.63), Safari (5.0.2)

Обновление Я оставлю этот вопрос открытым еще на неделю, если кто-то смог стилизовать элементы <legend>. Если решения не найдены, я отвечу на ответ @jnpcl.

Ответ 1

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

Проще говоря, это невозможно браузеров для размещения LEGEND элемент в полевом поле.

Обходной путь: оберните текст из <legend> в <span>, затем переместите <span>.

Ответ 2

Этого достаточно:

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

Ответ 3

Я только что создал свой <legend>, предоставив им position: absolute; top: -25px; и родительский <fieldset> с position: relative; padding-top: 30px;

Ответ 4

Согласно спецификации, здесь стиль по умолчанию из fieldset и legend элементов. Сбрасывая эти свойства, вы можете иметь чистый элемент legend для работы.

Ответ 5

Как и в стандарте HTML - Living Standard, нижеследующие стили работают как по умолчанию:

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;
}