CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

【CSS】number型入力フィールドの矢印（スピナー）を非表示にする方法

<input type="number"> で作成した数値入力フィールドには、ブラウザ標準で上下の矢印（スピナーボタン）が自動的に表示されます。デザインの統一やUIの都合で、これらの矢印を非表示にしたいケースはよくあります。そんなときは、CSSを少し追加するだけで簡単に削除できます。

スピナーを削除するサンプルコード

以下は、CSSを使用して数値入力フィールドから矢印／スピナーを取り除くコード例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}
</style>
</head>
<body>
<h1>Input Numbers Hide Arrows</h1>
<input type="number" value="10">
<h2>Only numbers can be entered in the above field</h2>
</body>
</html>

コードの解説

::-webkit-outer-spin-button と ::-webkit-inner-spin-button は、Chrome・Safari・EdgeなどWebKit系ブラウザで表示される外側・内側の矢印ボタンを指す疑似要素です。ここに -webkit-appearance: none; を指定することで、矢印を完全に非表示にできます。あわせて margin: 0; を設定しておくと、余計な余白も消えてレイアウトが崩れません。

一方、FirefoxではWebKit系の疑似要素が使えないため、input[type="number"] に対して -moz-appearance: textfield; を指定します。これにより、入力欄が通常のテキストフィールドと同じ外観になり、矢印が表示されなくなります。

出力結果

上記のコードを実行すると、矢印のないシンプルな数値入力フィールドが表示されます。

【CSS】number型入力フィールドの矢印（スピナー）を非表示にする方法


  1. PowerPointの配布資料からスライド番号を削除する方法【印刷・PDF対応】

    PowerPointプレゼンテーションをPDFとして保存したり、配布資料として印刷したりする際に、スライドの下にスライド番号が表示されて困ったことはありませんか?印刷プレビューやPDFファイルにも同じように番号が表示されます。この記事では、PowerPointの配布資料からスライド番号を削除する方法を詳しく解説します。この設定を活用すれば、印刷時の見栄えが良くなるだけでなく、スライドの順序を入れ替える際にも混乱を防ぐことができます。 PowerPointからスライド番号を削除する手順 配布資料からスライド番号を削除するには、以下の手順に従ってください。 スライド番号が設定されているPow

  2. Excelで0を削除する7つの方法【先頭ゼロ・ゼロ値の消し方】

    この記事では、Excelからゼロ(0)を削除する方法を詳しく解説します。自分以外の人が作成したスプレッドシートを扱うとき、セルにさまざまな数値形式が混在していることが少なくありません。たとえば、電話番号には先頭に「0」が付いていることがありますし、逆にセルの値がすべて「0」だけの場合、平均値などの計算結果に悪影響を及ぼすこともあります。幸い、Excelにはどちらのタイプのゼロにも対応できる機能が複数用意されています。それでは、順番に見ていきましょう。 練習用ワークブックのダウンロード この記事の作成に使用した練習用ワークブックは、こちらからダウンロードできます。 Excelから0を削除する