From da4f5d236b604d7895ea9ce9c8a4169444a98a54 Mon Sep 17 00:00:00 2001
From: Luke Warlow <lwarlow@igalia.com>
Date: Tue, 1 Jul 2025 13:37:59 +0100
Subject: [PATCH] [css-forms-1] Add improved slider UA styles styles for switch

Positioning of ::slider-thumb and sizing of ::slider-fill for range still need to be added.
---
 css-forms-1/Overview.bs | 35 +++++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/css-forms-1/Overview.bs b/css-forms-1/Overview.bs
index 6b3c18ea2c2..170ad53404c 100644
--- a/css-forms-1/Overview.bs
+++ b/css-forms-1/Overview.bs
@@ -813,11 +813,31 @@ select {
 
 ## Sliders ## {#stylesheet-sliders}
 
-ISSUE: Refine meter, progress, switch and range input styling.
+ISSUE(12267): Refine meter, progress, switch and range input styling.
 
 ```css
+input:is([type=checkbox][switch], [type=range]) {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  width: 100%;
+}
+
+input[type=checkbox][switch] {
+  width: 2em;
+}
+
 ::slider-track {
   height: 1em;
+  width: 100%;
+}
+
+input[type=range]::slider-track {
+  height: 0.5em;
+}
+
+input[type=checkbox][switch]::slider-track {
+  border-radius: 1em;
 }
 
 ::slider-fill {
@@ -829,13 +849,24 @@ ISSUE: Refine meter, progress, switch and range input styling.
   inline-size: 0;
 }
 
+input[type=checkbox][switch]::slider-fill {
+  background-color: transparent;
+  border-radius: inherit;
+}
+
 ::slider-thumb {
   border-radius: 0;
   border: none;
   background-color: currentColor;
   appearance: none;
   width: 1em;
-  height: 100%;
+  height: 1em;
+  border-radius: 100%;
+  position: absolute;
+}
+
+input[type=checkbox][switch]:checked::slider-thumb {
+  inset-inline-end: 0;
 }
 ```