HTML5のナンバー入力スピンボックスを非表示にする方法 (日本語)
2024-08-28
HTML5のナンバー入力要素は、ユーザーが数値を入力するための便利な方法を提供します。しかし、場合によっては、スピンボックス（上下の矢印）を非表示にする必要があることがあります。
CSSを使用してスピンボックスを非表示にする
最も一般的な方法は、CSSを使用することです。
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textf ield;
}
このコードは、次のことを行います。
- WebKitブラウザ（Chrome、Safariなど）では、
::-webkit-outer-spin-buttonと::-webkit-inner-spin-buttonセレクタを使用してスピンボックスを非表示にします。 - Firefoxでは、
-moz-appearance: textfieldプロパティを使用してスピンボックスを非表示にします。
他の方法
- カスタムスピンボックスを実装して、より柔軟な制御を提供することもできます。
- JavaScriptを使用して、スピンボックスのクリックイベントを処理し、デフォルトの動作をオーバーライドすることもできます。
注意
異なるブラウザ間の互換性を確保するために、さまざまなベンダープレフィックスを使用する必要がある場合があります。
例
<input type="number" id="myNumberInput">
このコードにCSSを適用すると、スピンボックスが非表示になります。
HTMLコード:
<input type="number" id="myNumberInput">
CSSコード:
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textf ield;
}
コードの説明:
-
input要素を作成し、type属性をnumberに設定することで、ナンバー入力フィールドを定義します。id属性を使用して、CSSでスタイルを適用するための識別子を設定します。
-
input[type="number"]::-webkit-outer-spin-buttonとinput[type="number"]::-webkit-inner-spin-buttonセレクタを使用して、WebKitブラウザ（Chrome、Safariなど）のスピンボックスの外観を指定します。-webkit-appearance: none;プロパティを使用して、スピンボックスのデフォルトの外観を非表示にします。margin: 0;プロパティを使用して、スピンボックスの余白を削除します。input[type="number"] { -moz-appearance: textfield; }を使用して、Firefoxのスピンボックスを非表示にします。
動作:
JavaScriptを使用する
イベントリスナーを追加
const numberInput = document.getElementById("myNumberInput");
numberInput.addEventListener("focus", () => {
numberInput.type = "text";
});
numberInput.addEventListener("blur", () => {
numberInput.type = "number";
});
このコードは、ナンバー入力フィールドがフォーカスされたときにtype属性をtextに変更し、フォーカスが外れたときにnumberに戻します。これにより、スピンボックスが一時的に非表示になります。
カスタムスピンボックスを作成する
HTMLでカスタムスピンボックスを作成
<div class="custom-spin-box">
<button class="decrement">-</button>
<input type="text" id="customNumberInput">
<button class="increment">+</button>
</div>
CSSでスタイルを適用
.custom-spin-box {
display: inline-block;
}
.custom-spin-box button {
padding: 5px;
cursor: pointer;
}
JavaScriptでスピンボックスの動作を実装
const customNumberInput = document.getElementById("customNumberInput");
const decrementButton = document.querySelector(".decrement");
const incrementButton = document.querySelector(".increment");
decrementButton.addEventListener ("click", () => {
customNumberInput.value = parseInt(customNumberInput.value) - 1;
});
incrementButton.addEventListener("click", () => {
customNumberInput.value = parseInt(customNumberInput.value) + 1;
});
この方法では、カスタムのボタンを使用してスピンボックスの機能を再現し、スピンボックスの外観を完全に制御することができます。
html css input
