Use fieldset for styling form elements

2025-01-27 22:54:47 +01:00
parent 6d7fb71830
commit 4d1680b7f5
11 changed files with 233 additions and 185 deletions
--- a/res/static/style/layout.css
+++ b/res/static/style/layout.css
@@ -386,6 +386,22 @@ ul {
 	list-style: disc;
 }

+fieldset {
+	padding: 4px;
+	border-radius: 8px;
+	border: 2px var(--separator) solid;
+	margin: 0;
+}
+
+fieldset>legend {
+	padding: 2px 8px;
+	margin-left: auto;
+	margin-right: auto;
+	border-radius: 8px;
+	font-size: 1.1em;
+	border-bottom: 2px var(--separator) solid;
+}
+
 /* Forms*/

 .form {
--- a/res/template/widgets.html
+++ b/res/template/widgets.html
@@ -57,6 +57,13 @@
 				File <input type="file" name="file">
 				<hr/>
 				Color <input type="color" name="favcolor" value="#ff0000">
+				<hr/>
+				<fieldset>
+					<legend>Legend</legend>
+					<p>
+						Fieldset
+					</p>
+				</fieldset>

 				<br/><br/>
 				<iframe src="https://pixeldrain.com/u/Nygt1on4?embed" style="border: none; width: 800px; max-width: 100%; height: 600px; max-height: 100%; border-radius: 16px;"></iframe>