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";

}
html css input webkit shadow-dom 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

Antworten:

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