fix: Hide the native input for boolean elements in firefox (#808)

loivsen · web-flow · commit 81c0a95a24b6 · 2024-06-17T11:42:40.000+02:00
* Hides the boolean input for firefox

* opacity
diff --git a/packages/uui-boolean-input/lib/uui-boolean-input.element.ts b/packages/uui-boolean-input/lib/uui-boolean-input.element.ts
@@ -193,6 +193,7 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin(
       }
 
       label {
+        position: relative;
         cursor: pointer;
         user-select: none;
 
@@ -207,7 +208,7 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin(
         position: absolute;
         height: 0px;
         width: 0px;
-        margin-top: -4px;
+        opacity: 0;
       }
 
       :host([label-position='left']) label {

Original file line number	Diff line number	Diff line change
`@@ -193,6 +193,7 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin(`
`193`	`193`	`}`
`194`	`194`
`195`	`195`	`label {`
	`196`	`+ position: relative;`
`196`	`197`	`cursor: pointer;`
`197`	`198`	`user-select: none;`
`198`	`199`
`@@ -207,7 +208,7 @@ export abstract class UUIBooleanInputElement extends UUIFormControlMixin(`
`207`	`208`	`position: absolute;`
`208`	`209`	`height: 0px;`
`209`	`210`	`width: 0px;`
`210`		`- margin-top: -4px;`
	`211`	`+ opacity: 0;`
`211`	`212`	`}`
`212`	`213`
`213`	`214`	`:host([label-position='left']) label {`