【CSS】input[type=”number”]の矢印を消す方法

input[type="number"]の矢印をCSSで消す方法です。

デフォルトの状態。PCブラウザで選択すると矢印(スピン)が表示

inputの装飾でよく使うappearance: none;ではなく、ブラウザごとにベンダープレフィックスの指定が必要だったので備忘録としてメモします。

主要ブラウザ(Chrome、Edge、Safari、Firefox)の一括対応

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

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

}

margin: 0; は無くても問題ないけど、古いブラウザでは必要な場合があるらしいので、念のため残しておきました。

矢印(スピン)を非表示にしたサンプル

選択しても矢印(スピン)が表示されない