Add forms checkbox fallback on Firefox

EternityForest · Nov 14, 2023 · e990f2f · e990f2f
1 parent dcdb5c7
commit e990f2f
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/css/barrel.css b/css/barrel.css
@@ -1026,17 +1026,29 @@ header:not(.undecorated) .tool-bar {
             width: 100%;
             max-width: 100%;
         }
-    }
 
-    & label:has(input[type=radio], input[type=checkbox]) {
-        flex-direction: row;
+        &:has(input[type="radio"], input[type="checkbox"]) {
+            flex-direction: row;
+        }
     }
 
+
     & :is(input:not([type='checkbox'], [type="radio"]), select, label) {
         min-width: 6em;
     }
 }
 
+/*This is a fallback for Firefox.  It's not great but it makes
+it usable.  Remove when FF fully supports :has()*/
+.stacked-form *::has(input[type="radio"], input[type="checkbox"]) {
+    flex-direction: row;
+}
+
+.stacked-form label input[type='checkbox'],
+.stacked-form label input[type='radio'] {
+    place-self: baseline;
+}
+
 .flex-col {
     display: flex;
     flex-wrap: wrap;

diff --git a/index.html b/index.html
@@ -78,6 +78,7 @@ <h4>The .stacked-form class</h4>
           <label>Another group<input></label>
           <label>More groups<input size="15"></label>
         </p>
+        <label><input type="checkbox">A checkbox</label>
 
 
         <fieldset>