Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Default CSS values for a fieldset <legend>

I'm trying to use a <legend> as a title inside a <fieldset>.

In browsers other than IE, the <legend> is positioned on the top border of the <fieldset>, with the text perfectly centered on the line.

alt text

I'm trying to reset it's position so that it sits just like any other element. i.e. an <h3>.

Here's the CSS I have so far.

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

But the legend is still perfectly centered on the line.

Yes, I can add a margin/padding/top coordinate but I want to know if the browser has any default values for the element that trigger this layout. I want to then, override these values.

Tested in Firefox (3.6.10), Chrome (6.0.472.63), Safari (5.0.2)

Update I'll leave this question open for another week just in case someone HAS been able to style <legend> elements. If no solutions are found I'll accept @jnpcl's answer.

like image 662
Marko Avatar asked Oct 19 '10 22:10

Marko


People also ask

What is a Fieldset CSS?

Definition and Usage. The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a box around the related elements.

What is CSS legend?

The legend tag is used to define the title for the child contents. The legend elements are the parent element. This tag is used to define the caption for the <fieldset> element.

What is a default CSS?

The :default CSS pseudo-class selects form elements that are the default in a group of related elements.


3 Answers

This is enough :

 form legend{     float: left;     width: 100%;  } 
like image 121
Neoweiter Avatar answered Sep 28 '22 09:09

Neoweiter


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

Simply put, it is not possible across browsers to position the LEGEND element in a Fieldset.

Workaround: wrap the text from <legend> in a <span>, then reposition the <span>.

like image 24
drudge Avatar answered Sep 28 '22 10:09

drudge


I've just styled my <legend>'s by giving them a position: absolute; top: -25px; and the the parent <fieldset> with a position: relative; padding-top: 30px;

like image 38
BWLR Avatar answered Sep 28 '22 09:09

BWLR