Mithilfe der display -Eigenschaft werden HTML-Elemente aus einer Stylingperspektive austauschbar. Dies scheint jedoch für fieldset und legend nicht der Fall zu sein.Kann ein beliebiges HTML-Element als Fieldset/Legende formatiert werden?
Ist es möglich, andere HTML-Elemente wie fieldset und legend zu stylen?
Die vorherige Antwort ist falsch, wenn Sie sehen wollen, warum diese versuchen:
<body style="background-color: #f00">
<div style="border: 1px solid #000">
<h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>
<fieldset><legend>Foobar</legend></fieldset>
</body>
AFAIK gibt es keine Möglichkeit, dass die Grenz Störung Wirkung zu haben, Das legend Element verursacht auf der fieldset Grenze. Ich glaube nicht, dass das mit CSS allein möglich ist, es ist nur etwas, das Teil der Art ist, wie das fieldset-Tag gerendert wird.
Erläuterung: Ich kenne keine Möglichkeit, ein Block- oder Inline-Element so zu positionieren, dass es den sichtbaren Rand seines umhüllenden Blockelements überspannt und dann die Grenze des Containerelements hinter seiner Box bricht. Das ist, was ein <legend> mit dem Rand auf seinem <fieldset> Element tut.
Sicher, zum Beispiel: ein DIV-Element mit einem Rahmen und einem Kind Überschrift Element mit der Hintergrundfarbe gesetzt, um die DIV-Grenze zu überlappen würde wie ein Fieldset und Legende aussehen.
Sehr einfaches Beispiel:
<div style="border: 1px solid #000">
<h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>
Dies kann nur korrekt aussehen, wenn der Hintergrund eine flache Farbe ist, kein Bild. –
Wahr. Es sei denn, es ist auch möglich, das Hintergrundbild auf das Kind-Überschriftenelement anzuwenden und es mit dem Hintergrund abzugleichen. Dies würde jedoch erfordern, dass die Elemente in einer festen Position sind, um zu funktionieren. –
Das funktioniert ziemlich gut, aber ie6 wird etwas seltsam wirken, wenn der Hintergrund ein Bild ist, nichts, was ein bedingter Kommentar nicht beheben konnte. Getestet in IE6-8, FF3.6, Safari 5, Chrome 5
.fieldset {
position: relative;
border: 1px solid #000;
margin: 20px;
padding: 20px;
text-align: left;
}
.fieldset .legend {
background: #fff;
height: 1px;
position: absolute;
top: -1px;
padding: 0 20px;
color: #000;
overflow: visible;
}
.fieldset .legend span {
top: -0.5em;
position: relative;
vertical-align: middle;
display: inline-block;
overflow: visible;
}
<div class="fieldset">
<div class="legend">
<span>This is the title</span>
</div>
Test
</div>
So fixierte ich den Code so, dass es aussieht etwas (Es ist wirklich die Legende Tag aussieht), wie die Legende Tag.
<div style="border: 2px groove #ccc">
<h1 style="font-weight:normal; background: #fff; margin-top: -11px; margin-left: 10px; padding: 0 10px 0 0; width: 40px; height:20px; font-size:1em;">Foobar</h1>
</div>
<fieldset><legend>Foobar</legend></fieldset>
Meine Antwort ist nicht falsch, es erfordert nur bestimmte Bedingungen zu arbeiten. Sie werden feststellen, dass dies bei dieser Art von "Trickserei" normalerweise der Fall ist; es gibt kaum eine Lösung für alle Fälle. –
Nun war seine Frage "Wie kann ich ein Element als Fieldset/Legendenpaar stylen?" Wenn Sie sich das Dokument ansehen, das ich zur Verfügung gestellt habe, sehen Sie zwei identische Blöcke? –
Was ich wirklich wissen wollte ist, ob es einen Weg gibt (mit dem CSS-Standard), um den genauen Effekt zu erhalten, den ein 'fieldset' /' legende' erzeugt, oder wenn der Effekt nur für 'fieldset' /' legend kodiert ist '. Da es tatsächlich hart codiert scheint, akzeptiere ich diese Antwort. – Jakob