Random thoughts & observations

From the mundane to the profound and everything in between here’s what’s rocking our world

Hiding default spinner buttons on HTML number input fields

Posted: April 18, 2015
Written by: Saints At Play
Category: HTML5

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.

« Return to Posts

Comments

Gravatar
Http://www.viagrabelgiquefr.com/viagra-

May 18, 2015

Interesting blog! Is your theme custom made
or did you download it from somewhere? A design like yours with a
few simple tweeks would really make my blog shine.
Please let me know where you got your design. Thanks a lot

Gravatar
Morris

April 24, 2015

What's up, its nice piehe of writing concerning media print, we aall understand
media is a fantastic source of information.

Gravatar
Http://www.piscine-corse.com

April 23, 2015

Keep this going please, great job!

Gravatar
Mbt For Sale

April 23, 2015

I like it when indoviduals come together and share ideas.
Great website, keep it up!

Posting comments after three months has been disabled.