[css-forms-1] Improve slider UA styles #12427
Conversation
lukewarlow
force-pushed
the
initial-switch-styles
branch
3 times, most recently
from
7c2d3a6 to
6053ab4
Compare
| @@ -829,6 +841,11 @@ ISSUE: Refine meter, progress, switch and range input styling. | |||
| inline-size: 0; | |||
| } | |||
|
|
|||
| input[type=checkbox][switch]::slider-fill { | |||
| background-color: transparent; | |||
| border-radius: inherit; | |||
There was a problem hiding this comment.
Not really sure if this should be needed, for my range input prototype it isn't but for switch it seems to be else the fill overflows the track.
We can adjust accordingly in future if it's not needed.
lukewarlow
force-pushed
the
initial-switch-styles
branch
from
6053ab4 to
02fb20b
Compare
| align-items: center; | ||
| width: 2em; | ||
| } | ||
|
|
||
| ::slider-track { | ||
| height: 1em; |
There was a problem hiding this comment.
Probably need some thought on how to meet WCAG target sizing here. Same goes for existing checkbox styling I believe.
css-forms-1/Overview.bs
Outdated
| position: absolute; | ||
| } | ||
|
|
||
| input[type=checkbox][switch]:checked::slider-thumb { | ||
| inset-inline-end: 0; | ||
| } |
There was a problem hiding this comment.
I wonder if we could use grid and align properties somehow here.
There was a problem hiding this comment.
I suspect we'll still end up using absolute positioning for range inputs though. So it depends how much cleaner it actually is.
Okay I'll make this draft and merge my other PR into this one so it can all be judged together. |
Positioning of ::slider-thumb and sizing of ::slider-fill for range still need to be added.
lukewarlow
force-pushed
the
initial-switch-styles
branch
from
02fb20b to
da4f5d2
Compare
See #12267
Still need to add stuff such as hover styles to this but this is the basics.
(Range Image includes an implementation of sizing and background color for the fill, and positioning of the thumb which aren't included in this PR)