spinが邪魔なので非表示にした

2021/10/04

spinが邪魔なので非表示にした

inputタグのtypeをnumberにしたときに表示されるスピン（上下の矢印、クリックすると値が増減する）が邪魔だったので非表示にしました。

MDNをみるに実験的な機能のようです。-mozはnumberをtextfieldに見せかけているような実装で、-webkitのほうはspinを非表示にしている感じでしょうか。

参考

<input type=”number”>のスピンボタン（上下の矢印ボタン）をCSSで非表示にする | Qiita

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

追記

考え直すと確かに数値しか入力しないが本質的には数値以外の文字を入力できないようにしたいだけなので、typeはtextでoninputでチェックしたほうがいいのでは？と思えてきた。