【HTML】inputタグの数値入力ボックスの端の三角矢印を消す

inputタグの数値入力(<input type=”number” >)で入力ボックスを表示すると、右端に三角矢印(▲▼)が出てきてクリックすると数値を増減したりできる。しかし、必ず手入力してもらいたい時など、この矢印入力を消したいことがある。

この三角矢印入力を消すには、style.cssに以下を記述する。

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

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

上がChrome、下がIEで有効。