Heim  >  Artikel  >  Web-Frontend  >  Wie werden Aufwärts-/Abwärtspfeile in Zahleneingabefeldern unabhängig von der Cursorposition angezeigt?

Wie werden Aufwärts-/Abwärtspfeile in Zahleneingabefeldern unabhängig von der Cursorposition angezeigt?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-27 03:14:03148Durchsuche

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

Immer sichtbare Aufwärts-/Abwärtspfeile für Eingabenummernfelder anzeigen

F: Ist es möglich, in „ „Number“-Eingabefelder erstellen, unabhängig von der Cursorposition?

A: Ja, Sie können dies mit CSS in Chrome erreichen.

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>

Es ist jedoch wichtig zu beachten, dass diese Methode in anderen Browsern möglicherweise nicht funktioniert. Alternativ können Sie die opacity-Eigenschaft verwenden:

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

Dieser Ansatz sollte in Chrome funktionieren, es ist jedoch wichtig, Fallback-Mechanismen zu berücksichtigen, um die Kompatibilität mit verschiedenen Browsern sicherzustellen.

Das obige ist der detaillierte Inhalt vonWie werden Aufwärts-/Abwärtspfeile in Zahleneingabefeldern unabhängig von der Cursorposition angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn