Skip to content

Commit e5a5e6d

Browse files
committed
[css-forms-1] Add initial UA styles for range input
Positioning of ::slider-thumb and sizing of ::slider-fill still need to be added.
1 parent 02fb20b commit e5a5e6d

File tree

1 file changed

+11
-7
lines changed

1 file changed

+11
-7
lines changed

‎css-forms-1/Overview.bs

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -816,19 +816,27 @@ select {
816816
ISSUE(12267): Refine meter, progress, switch and range input styling.
817817

818818
```css
819-
input[type=checkbox][switch] {
819+
input:is([type=checkbox][switch], [type=range]) {
820820
display: inline-flex;
821821
position: relative;
822822
align-items: center;
823+
width: 100%;
824+
}
825+
826+
input[type=checkbox][switch] {
823827
width: 2em;
824828
}
825829

826830
::slider-track {
827831
height: 1em;
832+
width: 100%;
833+
}
834+
835+
input[type=range]::slider-track {
836+
height: 0.5em;
828837
}
829838

830839
input[type=checkbox][switch]::slider-track {
831-
width: 100%;
832840
border-radius: 1em;
833841
}
834842

@@ -852,12 +860,8 @@ input[type=checkbox][switch]::slider-fill {
852860
background-color: currentColor;
853861
appearance: none;
854862
width: 1em;
855-
height: 100%;
856-
}
857-
858-
input[type=checkbox][switch]::slider-thumb {
859-
border-radius: 100%;
860863
height: 1em;
864+
border-radius: 100%;
861865
position: absolute;
862866
}
863867

0 commit comments

Comments
 (0)