数値フィールドの矢印を削除する方法

WPFormsの数値フィールドに表示されるデフォルトの矢印を削除することに興味がありますか？Chrome、Safari、Firefoxなどのブラウザは、フォームフィールドに独自のデフォルトスタイルを適用し、数値フィールドに矢印を表示することが一般的です。これらの矢印を削除したい場合は、その手順をご案内します。

少しのCSSで、フォームフィールドの外観を簡単に変更できます。このチュートリアルでは、フィールドから矢印を削除するために必要なCSSを提供します。

数値フィールドの矢印を削除する

このスタイルを削除するには、カスタムCSSをコピーしてサイトに貼り付ける必要があります。

カスタムCSSの追加方法や場所についてサポートが必要な場合は、こちらのチュートリアルをご覧ください。

特定のフォームの場合

このCSSは、特定のフォームID612の数値フォームフィールドにのみ適用されます。このCSSを使用する前に、このIDを更新する必要があります。

フォームIDの見つけ方についてサポートが必要な場合は、こちらのチュートリアルをご覧ください。

form#wpforms-form-612 input[type="number"]::-webkit-outer-spin-button, form#wpforms-form-612 input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
 
form#wpforms-form-612 input[type="number"] {
    -moz-appearance: textfield;
}

すべてのフォームの場合

すべてのフォームの矢印を削除したい場合は、このCSSを使用します。

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

このCSSはフォームフィールドの機能を変更しません。数値フォームフィールドには数値のみが受け入れられますが、CSSを追加した後、フィールドに矢印が表示されなくなります。

これで、数値フィールドの上下の矢印を削除するために必要なすべてが揃いました。他のフォームフィールドもスタイル設定したいですか？テキストベースのフィールドにスタイルを追加する方法の記事をご覧ください。