Heim > Web-Frontend > CSS-Tutorial > Wie verstecke ich das HTML5-Zahleneingabe-Drehfeld?

Wie verstecke ich das HTML5-Zahleneingabe-Drehfeld?

Barbara Streisand
Freigeben: 2024-12-23 15:54:11
Original
174 Leute haben es durchsucht

How to Hide the HTML5 Number Input Spin Box?

Verbergen der HTML5-Zahleneingabe-Drehbox

Frage:

Kann man das Erscheinungsbild der gerenderten Drehbox konsequent unterdrücken? von einigen Browsern (wie Chrome) für HTML-Eingaben vom Typ „Zahl“? Wie kann man mit CSS oder JavaScript verhindern, dass die Auf-/Ab-Pfeile sichtbar sind?

Beispiel:

<input>
Nach dem Login kopieren

Lösung:

Zum effektiven Ausblenden der Spinbox in WebKit-Browsern (getestet in Chrome 7.0.517.44 und Safari). 5.0.2), wenden Sie das folgende CSS an:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield; /* Firefox */
}
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie verstecke ich das HTML5-Zahleneingabe-Drehfeld?. 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