Heim > Web-Frontend > CSS-Tutorial > 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
Freigeben: 2024-10-27 03:14:03
Original
268 Leute haben es durchsucht

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" />
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage