Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Können Sie in allen Browsern immer Aufwärts-/Abwärtspfeile für Eingabefelder „Zahlen' anzeigen?

Patricia Arquette
Freigeben: 2024-10-28 22:05:30
Original
922 Leute haben es durchsucht

Can You Always Show Up/Down Arrows for Input

Aufwärts-/Abwärtspfeile für das Eingabefeld „Zahl“ anzeigen

Die Möglichkeit, die Aufwärts-/Abwärtspfeile für ein Eingabefeld „Zahl“ umzuschalten ist ein anhaltendes Problem für Webentwickler. Trotz der Verwendung von CSS hatten einige Benutzer Schwierigkeiten, diese Pfeile konsistent anzuzeigen.

Können Sie bei der Eingabe „Zahl“ immer Aufwärts-/Abwärtspfeile anzeigen?

Ja, das ist es Es ist möglich, für ein Eingabefeld „Zahl“ immer Aufwärts-/Abwärtspfeile anzuzeigen. Wie bei vielen CSS-Funktionen verfügt diese Funktion jedoch nur über eine eingeschränkte Browserunterstützung.

Lösung:

Um dies zu erreichen, können Sie das -webkit-inner-spin- verwenden. button- und -webkit-outer-spin-button-Pseudoelemente. Indem Sie die Deckkraft dieser Elemente auf 1 setzen, können Sie erzwingen, dass die Pfeile sichtbar sind.

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

Hinweis: Diese Lösung funktioniert hauptsächlich in Chrome. Andere Browser unterstützen dies möglicherweise nicht. Erwägen Sie daher die Verwendung einer Fallback-Methode für optimale browserübergreifende Kompatibilität.

Das obige ist der detaillierte Inhalt vonKönnen Sie in allen Browsern immer Aufwärts-/Abwärtspfeile für Eingabefelder „Zahlen' anzeigen?. 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