Ändern Sie die Größe des Zahleneingabe-Spinner?
Bei einer Zahleneingabe hat es einen Spinner, der mehrere css-Eigenschaften hat, aber ich finde keinen Weg, die Größe des Spinner selbst zu ändern. Ich spreche von <input type='number'> . Ich habe versucht, etwas zu finden, das die Größe verändern würde, aber ich konnte nichts finden. Das andere Problem, das ich vermute, ist, dass jeder Browser auf möglicherweise jedem Betriebssystem eine potenziell unterschiedliche Implementierung des Spinner selbst haben wird. Wenn ich Spinner sage, spreche ich über den hervorgehobenen Teil dieses Bildes.
Ich kann den JQuery-UI-Spinner nicht verwenden, da die große App, die ich entwickle, JQuery UI 1.8 verwendet, die den Spinner nicht enthält. Das Aktualisieren verursacht Probleme.
5 Antworten
Dieses CSS scheint in Chrome zu funktionieren, indem die Spinner durch ein statisches Bild (eines Spinner) ersetzt werden und dann die Größe und Position des Bildes innerhalb des Elements kontrolliert und standardmäßig unsichtbar gemacht wird, bis der Benutzer darüber schwebt:
%Vor%Nicht ideal, aber probieren Sie es mit der CSS-Transformationseigenschaft aus:
Zum Beispiel
%Vor%Dies erhöht die Größe der gesamten Eingabe, aber möglicherweise kann dies (in Verbindung mit der Einstellung von Schriftgröße, Zeilenhöhe, Höhe, Breite) einen gewünschten Effekt erzeugen.
Die "Größe des Drehfelds" ist ein vages Konzept, aber das <input type=number> -Element scheint mindestens% width , height und Einstellungen der Schrifteigenschaften zu befolgen. Beispiel:
Ob solche Einstellungen nützlich sind und ob sie funktionieren sollten, ist ein anderes Problem. Es kann argumentiert werden, dass die Implementierung solcher Elemente ein Browser-abhängiges nettes, verwendbares Widget sein soll, das für die Browserbedingungen geeignet ist, anstatt etwas, mit dem sich die Autoren herumschlagen sollten. In der Praxis wird das Widget jedoch stark von CSS-Einstellungen beeinflusst, und dies könnte in der Praxis eine gute Sache sein, z. weil das Eingabefeld standardmäßig zu breit ist. (Wir könnten erwarten, dass Browser dies nach den Werten min und max einstellen, aber das passiert derzeit einfach nicht.) Das Risiko besteht darin, dass Sie durch die Einstellung der Breite möglicherweise in Konflikt mit der Implementierung kommen. Der obige Code erwartet, dass die Pfeile nach oben und nach unten maximal eine Breite von einem Zeichen haben, aber diese Schätzung könnte eines Tages falsch sein.
Sie können ein Eingabefeld mit zwei Schaltflächen für hoch und runter machen und sie dann so gestalten, wie Sie möchten.
%Vor%js:
%Vor%solltest du dann auch überprüfen, dass der Eingang nur Zahlen innen hat, damit dein +/- 1 wirklich funktioniert.
Einfaches HTML ...
Keine Bibliothek oder Bilder erforderlich.
HTML
%Vor%CSS
%Vor%JavaScript
%Vor%