Ist es möglich, immer Aufwärts- / Abwärtspfeile für die Eingabe „Nummer“ anzuzeigen?

79

Ich möchte immer Aufwärts- / Abwärtspfeile für das Eingabefeld "Nummer" anzeigen. Ist das möglich? Bisher hatte ich kein Glück ...

http://jsfiddle.net/oneeezy/qunbnL6u/

HTML:

<input type="number" />

CSS:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   -webkit-appearance: "Always Show Up/Down Arrows";

}

— Oneezy
quelle

2

Mögliches Duplikat der Zahleneingabe - immer Drehknöpfe anzeigen

— Samuel Liew

Haben Sie die Lösung gefunden? In meinem Fall funktioniert es nicht.

— 18zɐɹƆ

Welchen Browser benutzt du? es funktioniert in Chrome

— Oneezy

147

Sie können dies (zumindest in Chrome) mithilfe der Opacity-Eigenschaft erreichen:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   opacity: 1;

}

Wie oben erwähnt, funktioniert dies wahrscheinlich nur in Chrome. Seien Sie also vorsichtig, wenn Sie diesen Code in freier Wildbahn verwenden, ohne dass andere Browser darauf zurückgreifen müssen.

— BJack
quelle

1

wie @NewBeeee sagte: In Firefox und Safari ist es eine Standardfunktion, um es immer anzuzeigen ( stackoverflow.com/questions/24286506/… )

— titusfx

6

Ich habe es versucht und es hat funktioniert

input[type=number]::-webkit-inner-spin-button {
    opacity: 1
}

</style>
<input type="number" value="1" min="1" max="999">

Hier gefunden

— Atta H.
quelle

4

Wenn Sie versuchen, das gleiche Erscheinungsbild für verschiedene Browser zu erzielen, müssen Sie möglicherweise ein Plugin / Widget verwenden oder selbst eines erstellen. Die Hauptbrowser scheinen alle Zahlenspinner unterschiedlich zu implementieren.

Probieren Sie das Spinner-Widget von jQuery UI aus, das viel mehr Vielseitigkeit beim Styling bietet.

Arbeitsbeispiel

<p>
    <label for="spinner">Select a value:</label>
    <input id="spinner" name="value" />
</p>

$("#spinner").spinner();

— apaul
quelle

Ich versuche nicht, die Unterstützung aller Browser zu erhalten, ich wollte nur wissen, ob es einen CSS-Trick gibt, mit dem sie immer sichtbar sind

— Oneezy

Meine ganze Idee dahinter war "anmutig verschlechtern". Wenn der Browser dies nicht unterstützt, scheint es sich nur um ein Textfeld zu handeln. .

— Wenn

Das Problem mit der JQuery-Benutzeroberfläche ist, dass es viele Konflikte mit dem Bootstrap gibt. Wenn Sie also Bootstrap in Ihrem Projekt verwenden, werden Sie in Schwierigkeiten geraten

— Dattatreya Kugve

0

Wenn es Ihnen nichts ausmacht, sich auf Ihre Eingabe zu konzentrieren, tun Sie dies

   document.getElementById(<id>).focus();

— Irina Rapoport
quelle