it-swarm.com.de

So entfernen Sie die Pfeile von der Eingabe [type = "number"] in Opera

Nur nach dem Entfernen dieser Pfeile Ausschau halten, was in bestimmten Situationen praktisch ist.

Ich möchte jedoch das Bewusstsein des Browsers für den rein numerischen Inhalt bewahren. Also ändere es auf input[type="text"] ist keine akzeptable Lösung.


Nun, da Opera ist Webkit-basiert, ist diese Frage ein Dublett von: Kann ich das Drehfeld der HTML5-Zahleneingabe verbergen?

111
anthonyryan1

Ich habe einige einfache CSS verwendet und es scheint, sie zu entfernen und gut zu funktionieren.

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
<input type="number" step="0.01"/>

Dieses Tutorial von CSS Tricks erklärt ausführlich und zeigt auch, wie man sie formatiert

273
JayD

Diese Pfeile sind Teil des Shadow DOM , also der DOM-Elemente auf Ihrer Seite, die vor Ihnen verborgen sind. Wenn Sie neu in der Idee sind, lesen Sie eine gute Einführung hier zu finden .

Das Shadow DOM spart uns zum größten Teil Zeit und ist gut. Es gibt jedoch Fälle wie diese, in denen Sie Änderungen vornehmen möchten.

Sie können diese jetzt in Webkit ändern mit den richtigen Selektoren , aber dies befindet sich noch in den frühen Entwicklungsstadien. Das Shadow DOM selbst hat noch keine vereinheitlichten Selektoren, daher sind die Webkit-Selektoren proprietär (und es ist nicht nur eine Frage des Anhängens von -webkit, wie in anderen Fällen).

Aus diesem Grund ist es wahrscheinlich, dass Opera noch nicht dazu gekommen ist, dies hinzuzufügen. Es ist jedoch schwierig, Ressourcen zu Opera Shadow DOM-Änderungen zu finden. Ein paar nzuverlässige Internetquellen Ich habe festgestellt, dass alle sagen oder vorschlagen, dass Opera unterstützt derzeit keine Shadow-DOM-Manipulation.

Ich habe ein bisschen Zeit damit verbracht, die Opera) - Website zu durchsuchen, um herauszufinden, ob es irgendeinen Hinweis darauf gibt. Außerdem habe ich versucht, sie in Dragonfly zu finden. Keine der beiden Suchen hatte Glück In Anbetracht des Schweigens zu diesem Thema und der sich entwickelnden Natur der Shadow DOM + Shadow DOM-Manipulation scheint es eine sichere Schlussfolgerung zu sein, dass Sie dies zumindest vorerst nicht in Opera tun können.

14
jamesplease

Es gibt keine Möglichkeit.

Diese Frage ist im Grunde genommen ein Duplikat von Gibt es eine Möglichkeit, die in Google angezeigten neuen HTML5-Spinbox-Steuerelemente auszublenden Chrome & Opera? aber möglicherweise kein vollständiges Duplikat, da das Motivation ist gegeben.

Wenn der Zweck darin besteht, „dem Browser bewusst zu sein, dass der Inhalt rein numerisch ist“, müssen Sie überlegen, was dies wirklich bedeuten würde. Die Pfeile oder Drehfelder tragen dazu bei, die numerische Eingabe in einigen Fällen komfortabler zu gestalten. Zum anderen wird überprüft, ob der Inhalt eine gültige Zahl ist. In Browsern, die HTML5-Eingabeverbesserungen unterstützen, können Sie dies möglicherweise mit dem Attribut pattern tun. Dieses Attribut kann sich auch auf eine dritte Eingabefunktion auswirken, nämlich auf die Art der möglicherweise angezeigten virtuellen Tastatur.

Wenn die Eingabe zum Beispiel genau fünf Stellen haben soll (wie es in einigen Ländern bei Postnummern der Fall sein könnte), dann ist <input type="text" pattern="[0-9]{5}"> könnte angemessen sein. Es ist natürlich implementierungsabhängig, wie damit umgegangen wird.

11