Skip to content

[css-forms-1] Double border style for progres, meter and input[type=checkbox][switch] #11841

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
lukewarlow opened this issue Mar 5, 2025 · 3 comments · May be fixed by #11984
Open

[css-forms-1] Double border style for progres, meter and input[type=checkbox][switch] #11841

lukewarlow opened this issue Mar 5, 2025 · 3 comments · May be fixed by #11984
Labels
css-forms-1

Comments

@lukewarlow
Copy link
Member

lukewarlow commented Mar 5, 2025 •
edited
Loading

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.
@nt1m
Copy link
Member

nt1m commented 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).

@lukewarlow lukewarlow changed the title [css-forms-1] Double border style for progress and meter [css-forms-1] Double border style for progres, meter and input[type=checkbox][switch] Mar 9, 2025
@lukewarlow
Copy link
Member Author

The same also applies for switch elements.

@lukewarlow
Copy link
Member Author

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.

@lukewarlow lukewarlow linked a pull request Mar 22, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-forms-1
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[css-forms-1] Remove ::track from layout rule lukewarlow/csswg-drafts
2 participants
@nt1m @lukewarlow