株式会社オートプロジェクト

Columnコラム
  • TOP
  • コラム一覧
  • CSSで[input type=”number”]の上下矢印を非表示にする方法
2023年6月6日
CSSで[input type=”number”]の上下矢印を非表示にする方法

今回は、<input type=”number”>を設定した際、下記のように矢印がデフォルトで出るので、削除する方法をお伝えします。

設定は以下です。

Chrome、Safariの場合

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

FireFoxの場合

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

また、inputタグにクラス名を入れて、まとめて書くことも可能です。

HTML

<input type="number" class="spin_erase">

CSS

.spin_erase::-webkit-inner-spin-button,
.spin_erase::-webkit-outer-spin-button {
-webkit-appearance: none!important;
margin: 0!important;
-moz-appearance:textfield!important;
}

※上記は!importantを使用してますが、効かない場合のみ!importantをつけてください。