JJ.
Ich habe drei Steuerelemente in meinem Webformular mit drei Dropdown-Listen.
Ich möchte eine grafische “Box” um diese Steuerelemente herum erstellen. Der Grund dafür ist, dass die Auswahl dieser Steuerelemente “SCHRITT 1” meines Prozesses wäre. Also möchte ich diese Steuerelemente umrahmen und es “Schritt 1” nennen.
Wie würde ich das mit CSS machen?
Beispiel:
Tim M.
EIN fieldset mit einer legend bietet eine visuelle und semantische Gruppierung für Formularsteuerelemente. Diese können Sie dann mit CSS nach Belieben stylen. EIN fieldset ist insofern einzigartig, als die legend ist in der Lage, die Grenze seines Elternteils visuell zu unterbrechen fieldset (mit anderen Elementen möglich, aber schwierig).
Beispiel: http://jsfiddle.net/NUMcr/1/
<fieldset>
<legend>Group 1</legend>
<input type="text" />
<asp:Textbox runat="Server" id="txt1" />
<!-- etc -->
</fieldset>
fieldset {
margin: 8px;
border: 1px solid silver;
padding: 8px;
border-radius: 4px;
}
legend {
padding: 2px;
}
hmmmmmmm, ich habe das Fieldset-Tag hinzugefügt, aber die Steuerelemente werden nicht im Feld angezeigt. Diese Steuerelemente sind mit einer CSS-Klasse verbunden, und die Positionierung ist für sie festgelegt. könnte dies ein Problem sein?
– JJ.
24. September 2012 um 20:22 Uhr
Es könnte sein. Fieldset ist nur ein Container, also sollte es ein behebbares Problem sein. Einstellung versuchen position: relative auf dem Fieldset und/oder versuchen Sie, das CSS vorübergehend auf den Steuerelementen zu entfernen und zu sehen, ob sie angezeigt werden.
– Timo M.
24. September 2012 um 20:24 Uhr
Dort ist der fieldset HTML-Element, das für diesen speziellen Zweck erstellt wurde: http://www.w3.org/wiki/HTML/Elements/fieldset. Wenn Sie nur CSS verwenden möchten, können Sie Folgendes tun:
<html>
<head></head>
<body>
<h1>Step 1</h1>
<div style="border: 1px solid #000000;">
<input type="text" />
<input type="submit" value="Submit" />
</div>
</body>
</html>
Die könntest du dann stylen h1 (oder welche Art von HTML-Element Sie für den Header verwenden möchten) und die div enthält die Eingabeelemente.
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
Fügen Sie Ihrer Antwort eine kleine Erklärung hinzu
– HaveNoDisplayName
18. September 2015 um 7:02 Uhr
