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

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

19 голосов
/ 20 октября 2010

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

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

alt text

Я пытаюсь сбросить его положение так, чтобы он сидел так же, как и любой другой элемент.то есть <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;
}

Но легенда все еще идеально отцентрирован на линии.

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

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

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

Ответы [ 5 ]

21 голосов
/ 20 декабря 2013

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

 form legend{
    float: left;
    width: 100%;
 }
7 голосов
/ 20 октября 2010

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

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

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

2 голосов
/ 20 апреля 2011

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

0 голосов
/ 30 ноября 2018

Согласно HTML - Стандарт жизни , следующие стили работают по умолчанию: 

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;
}
0 голосов
/ 19 февраля 2018

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

...