Merge pull request #1795 from Kozea/forms-style

Add stylesheet for forms
Kozea · Jan 23, 2023 · b446f6e · b446f6e
2 parents 79e84da + cc6e004
commit b446f6e
Showing 1 changed file with 101 additions and 3 deletions.
diff --git a/weasyprint/css/html5_ua.css b/weasyprint/css/html5_ua.css
@@ -214,7 +214,6 @@ blink { text-decoration: blink; }
 blockquote { display: block; margin: 1em 40px; /* unicode-bidi: isolate; */ }
 body { display: block; margin: 8px; }
 br::before { content: '\A'; white-space: pre-line; }
-button { display: inline-block; text-align: center; text-indent: 0; }
 caption { display: table-caption; /* unicode-bidi: isolate; */ }
 center { display: block; text-align: center; /* unicode-bidi: isolate; */ }
 cite { font-style: italic; }
@@ -294,7 +293,108 @@ fieldset { display: block; border-style: groove; border-width: 2px; margin-left:
 figcaption { display: block; /* unicode-bidi: isolate; */ }
 figure { display: block; margin: 1em 40px; /* unicode-bidi: isolate; */ }
 footer { display: block; /* unicode-bidi: isolate; */ }
+
 form { display: block; /* unicode-bidi: isolate; */ }
+button,
+input,
+select,
+textarea {
+  border: 2px solid black;
+  display: inline-block;
+  font-size: 0.85em;
+  padding: 0.2em;
+  white-space: pre;
+  width: 20em;
+}
+input:not([type="image"]) {
+  box-sizing: border-box;
+}
+input[type="button"],
+input[type="reset"],
+input[type="submit"],
+button {
+  background: lightgrey;
+  border-radius: 0.25em;
+  text-align: center;
+}
+input[type="button"][value],
+input[type="reset"][value],
+input[type="submit"][value],
+button[value] {
+  max-width: 100%;
+  width: auto;
+}
+input[type="submit"]:not([value])::before {
+  content: "Submit";
+}
+input[type="reset"]:not([value])::before {
+  content: "Reset";
+}
+input[type="checkbox"],
+input[type="radio"] {
+  height: 1em;
+  width: 1em;
+}
+input[type="checkbox"] {
+  margin: 0.2em 0.2em 0.2em 0.4em;
+}
+input[type="color"] {
+  background: lightgrey;
+}
+input[type="hidden"] {
+  display: none;
+}
+input[type="image"] {
+  box-sizing: content-box;
+}
+input[type="radio"] {
+  border-radius: 50%;
+  margin: 0.2em 0.2em 0 0.4em;
+}
+input[value]::before {
+  content: attr(value);
+  display: block;
+  overflow: hidden;
+}
+input::before,
+input[value=""]::before {
+  content: " ";
+}
+select {
+  background: lightgrey;
+  border-radius: 0.25em 0.25em;
+  padding-right: 1.5em;
+  position: relative;
+  white-space: normal;
+}
+select::before {
+  content: "˅";
+  position: absolute;
+  right: 0;
+  text-align: center;
+  width: 1.5em;
+}
+option {
+  display: none;
+  white-space: nowrap;
+}
+select:not(:has(option[selected])) option:first-of-type,
+option[selected]:not(option[selected] ~ option[selected]) {
+  display: block;
+  overflow: hidden;
+}
+textarea {
+  box-sizing: border-box;
+  margin: 0.1em 0;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  padding: 0.2em;
+  white-space: pre-wrap;
+}
+textarea:empty {
+  height: 3em;
+}
+
 frame { display: block; }
 frameset { display: block; }
 
@@ -414,7 +514,6 @@ ol ol { margin-bottom: 0; margin-top: 0; }
 ul ol { margin-bottom: 0; margin-top: 0; }
 
 optgroup { text-indent: 0; }
-option { text-indent: 0; display: none; } /* Don't display the tag, it's replaced content in dynamic browsers */
 output { /* unicode-bidi: isolate; */ }
 output[dir] { /* unicode-bidi: isolate; */ }
 p { display: block; margin-bottom: 1em; margin-top: 1em; /* unicode-bidi: isolate; */ }
@@ -430,7 +529,6 @@ s { text-decoration: line-through; }
 samp { font-family: monospace; }
 script { display: none; }
 section { display: block; /* unicode-bidi: isolate; */ }
-select { text-indent: 0; }
 small { font-size: smaller; }
 source { display: none; }
 strike { text-decoration: line-through; }