Hiding default spinner buttons on HTML number input fields

April 18, 2015, 6:04 pm
Author: James Griffiths

If you've been exploring HTML5 (and there's no good reason why you shouldn't be) you're probably familiar with the range of form enhancements that this recent upgrade to the language brings with it, in particular those concerning additional input field types.

If this is the case then you might also be familiar with certain browsers adding default controls to the number input field.

Thankfully these can also be removed - with only a smidgen of CSS.

To target webkit browsers simply add the following rule into your stylesheet:

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

The above rule targets the input number field, allowing it to be visually modified, using pseudo-elements which are part of the (still) evolving CSS 3 specification.

Pseudo-elements, which differ from pseudo-classes, allow for the styling of a document to be altered such as, for example, adding content using the ::before and ::after pseudo-elements.

For reference, pseudo-elements are supported in the following browsers:

  • Internet Explorer 8+
  • Firefox 1+
  • Opera 4+
  • Safari 1+
  • Google Chrome (initial version unknown although latest iterations offer full support)

For Mozilla based browsers such as Firefox simply add the following rule:

input[type=number] {
  -moz-appearance: textfield;
}

The -moz-appearance CSS property instructs Mozilla browsers to render the number input field as a textfield based on the operating system's native styling.

Now you have a rule set that prevents spinner buttons being displayed for number type input fields on both Webkit enabled browsers (such as Google Chrome, Safari and recent versions of Opera) and Mozilla based browsers such as Firefox.

Great...but what about Internet Explorer?

Versions 10 and 11 of Microsoft's web browser do support the number field but do NOT display the spinner buttons - thankfully this is one time that particular browser doesn't cause developers problems (and it's not often you get a chance to say that about Internet Explorer).

Whether that can still be said with their forthcoming Spartan browser remains to be seen.

Categories

« Return to Posts

Post a comment

All comments are welcome and the rules are simple - be nice and do NOT engage in trolling, spamming, abusiveness or illegal behaviour. If you fail to observe these rules you will be permanently banned from being able to comment.