今回は、<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をつけてください。
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。