[css-forms-1] Improve slider UA styles#12427
Conversation
7c2d3a6 to
6053ab4
Compare
|
|
||
| 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.
6053ab4 to
02fb20b
Compare
css-forms-1/Overview.bs
Outdated
| } | ||
|
|
||
| ::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.
nt1m
left a comment
There was a problem hiding this comment.
This looks good by itself, I do think we should do this at the same for other controls too though, it's very likely that range inputs (and potentially other slider based controls) end up looking similar in terms of border-radius.
| 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. |
02fb20b to
da4f5d2
Compare
da4f5d2 to
6371aaf
Compare
f1d29cf to
a62208c
Compare
Positioning of ::slider-thumb and sizing of ::slider-fill for range still need to be added.
a62208c to
8c4bb52
Compare
|
@nt1m does this look good to merge? We'll obviously need follow-ups for stuff like WCAG touch sizing and actually positioning the thumbs and stuff. |
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 for the fill, and positioning of the thumb which aren't included in this PR)