WebKit Spin Buttons on Number Inputs

If you’re using Chrome (or another WebKit browser), you’ll see up and down arrows next to the <input type="number" /> above (if not, try hovering over it).

To get rid of these set the CSS to the following:

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

Tada!

#nospin::-webkit-inner-spin-button,
#nospin::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}

Thanks go to Bob Spryn on StackOverflow.

Advertisements

2 thoughts on “WebKit Spin Buttons on Number Inputs

    1. I think they certainly have their uses and I’m generally against removing default functionality but sometimes styling (or a client) dictates they’re removed! The reason I removed them for this blog post was due to having some very narrow numeric inputs, where the spin buttons were taking up valuable screen real estate.

      Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s