openui / openui/open-ui

Standardise the anatomy of input[type=number]

Open
#769 6 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

needs-research needs-triage
Dominant language
MDX
Stars
4.5k
Forks
226
Avg merge
2d 22h
Merged PRs (30d)
4

Description

<input type="number"> elements display spinners in most desktop browsers to increase/decrease the number value. These cannot be styled. There is the non-standard ::-webkit-inner-spin-button and ::-webkit-outer-spin-button, but these are limited and don't work in all browsers. Links regarding the webkit selectors:

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-inner-spin-button
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-outer-spin-button
https://trac.webkit.org/wiki/Styling%20Form%20Controls#inputelement

It would be good for Open UI to standardise this anatomy and then try to standardise it for better styleability.

See https://github.com/w3c/csswg-drafts/issues/8777

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the referenced MDN pages for ::-webkit-inner-spin-button and ::-webkit-outer-spin-button, then read the linked CSSWG issue 8777. Done would mean proposing a standardized anatomy for input[type="number"] and a path toward making it more styleable across browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.