カーソルの位置に関係なく数値入力フィールドに上/下矢印を表示するにはどうすればよいですか?-CSSチュートリアル-php.cn

カーソルの位置に関係なく数値入力フィールドに上/下矢印を表示するにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-10-27 03:14:03

オリジナル

268 人が閲覧しました

How to Display Up/Down Arrows in Number Input Fields Regardless of Cursor Position?

数値入力フィールドに常に表示される上/下矢印を表示する

Q: 「」で調整用の矢印ボタンを常に表示することは可能ですか?

A: はい、Chrome の CSS を使用してこれを実現できます。

HTML:

<input type="number" />

ログイン後にコピー

CSS:

<code class="css">input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: "always show up/down arrows";
}</code>

ログイン後にコピー

ただし、このメソッドは他のブラウザでは機能しない可能性があることに注意してください。代わりに、不透明度プロパティを使用できます。

<code class="css">input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity: 1;
}</code>

ログイン後にコピー

このアプローチは Chrome で機能するはずですが、さまざまなブラウザとの互換性を確保するためにフォールバックメカニズムを考慮することが重要です。

以上がカーソルの位置に関係なく数値入力フィールドに上/下矢印を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。