[html5] input type=’number’のスピンボタンを非表示に

html5ではinputタグのタイプがhtml4に比べ充実したものとなっています。<input type='number'>もその一つで、数値のみ入力可能な入力欄を表示します。

2012年4月25日現在、<input type='number'>を実装しているブラウザはwebkit系のsafariとchromeのみで、IE、Firefox、Operaは残念ながら未対応です。未対応とは言っても、数値以外が入力された時にそれを消してしまう機能が無いだけで、<input type='text'>として使うことはできるようになっています。なので、今後のことを考えれば、数値のみを入力させるフォームでは<input type='number'>を書いておくのもありではないかと思います。

さて、この<input type='number'>なのですが、chrome及びsafariでは入力欄の右側にスピンボタンが表示されます（iPhone版safariではスピンボタンは表示されません）。

ご覧のようにあまりデザイン的に良い感じではありません。余計な場所も取りますし、必要がないときはスピンボタンは表示しないでおきたいです。というわけでスピンボタンを非表示にするスタイルが以下です。

<style type='text/css'>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
</style>

これでスピンボタンの無い普通の入力欄として表示されるようになります。もちろん数値以外の入力を受け付けない機能はそのままです。

-webkit-を使った設定ですので、今後、html5が正式勧告された際には書き方が変わるでしょうが、取りあえず現時点ではこの方法でスピンボタンが表示されなくなります。