Skip to content


width of textinput depends on its type #5131

CodeRect opened this Issue · 5 comments

5 participants



the width of textinput depends on its type. some are just smaller than others.


(i just wanted to provide a minimal example)


nexus s
(running android 4.1.1)


jQuery reports that both of the input fields are the same width even though visually they differ.


I bet this is due to some odd vestigial spacing for the spinner arrows that is used on desktop Chrome but they suppress on mobile. If bet if we added this, they would be the same width:

input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;

This has that style change in for testing...

@jschulte jschulte pushed a commit that referenced this issue
Jonah Schulte inputs: remove webkit-inner-spin-button and webkit-appearance:none as…
… they caused an unwanted change in Chrome. Fixes #5131
@gseguin gseguin pushed a commit that closed this issue
Jonah Schulte inputs: add margin 0 for webkit-inner-spin-button/webkit-outer-spin-b…
…utton to resolve android 4.1 width issue for type=number fields. Fixes #5131
@gseguin gseguin closed this in 62457f9

Hold on, I just posted that page to prove that this was a vestigal style problem in Webkit. I don't think we should hide the spinners by adding the -webkit-appearance: none; property because this will remove the functionality on desktop browsers and, in theory, future mobile browsers that eventually support a spinner type feature on spinner inputs.

jQuery Foundation member

Just margin 0 should do the trick.

Update: @jschulte already removed -webkit-appearance: none; so this is resolved.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.