Closed
Description
Per https://drafts.csswg.org/css-forms/#layout
Meter, Progress and switch inputs get a double border, once on the "host" element, once on the inner track.
input:not([type=file], [type=range]),
...
::track,
meter,
progress {
border: 1px solid currentColor;
background-color: transparent;
}I think the meter, and progress elements should be removed from this second rule (they also already get a transparent background-color from the base rule). [type=checkbox][switch] should also be added to the not selector on the first line.
Metadata
Metadata
Assignees
Type
Projects
Milestone
Relationships
Participants
Activity
nt1m commentedon Mar 5, 2025
Yeah, the UA styles are definitely not finished. I'm hoping implementation/prototyping/polyfills might be able to help finalize the final set of CSS (like it did for select).
[-][css-forms-1] Double border style for progress and meter[/-][+][css-forms-1] Double border style for progres, meter and input[type=checkbox][switch][/+]lukewarlow commentedon Mar 9, 2025
The same also applies for switch elements.
lukewarlow commentedon Mar 9, 2025
Alternative to my suggestion in OP we could remove the border from the track and add it to the host element. Which in my prototyping of switch seems to get you more logical sizing and positioning.