2017-11-23 4 views
3

Seit der Aktualisierung von Firefox haben wir nun kleine (x) Schaltflächen in der Eingabe als Teil der Benutzeroberfläche von Firefox.Firefox Quantum (57) <input type = "date"> Schaltfläche zum Schließen/Löschen der Benutzeroberfläche Ausblenden

Gibt es eine Möglichkeit, diese Schaltflächen mit CSS zu verstecken/zu entfernen?

Sie können dies auf der Eingangsdatum Webseite auf mozilla firefox siehe hier: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

oder Ansicht Bild here

+0

Billig erschossen ist benutzerdefinierte datypicker verwenden (th Es gibt viele libs/Schnipsel dafür) oder sogar billiger ist, Element zu Texteingabe zu setzen, aber im Platzhalter setzen korrekte Datumsformat, damit Benutzer es bekommt. Nicht ideal, aber diese Scheiße sind in Eingabeelement eingebettet und scheinen schwer AF loszuwerden. Früher gab es einige Webkit-Selektoren, aber solche, die ich nicht mehr betrieb. Sein Anoying zum Maximum, da auf kleinen Elementen es die Hälfte des Platzes braucht – DanteTheSmith

+0

danke @DanteTheSmith wenn ich keine andere Antwort habe, kann ich gezwungen sein, dies zu tun, wäre toll, aber nicht :) – HKG

+0

Fühlen Sie sich frei, Ihre eigene Frage zu beantworten, wenn Sie finde die Lösung vor allen anderen. Ich habe die Frage umgekrempelt, hoffentlich wird jemand wissen, wie man das besser macht. Aber ich fürchte um die Wartbarkeit von Lösungen, deshalb gehe ich mit benutzerdefinierten Datepickern. – DanteTheSmith

Antwort

1

Clip-Pfad ist eine grobe Annäherung Sie verwenden können funktioniert:

input[type=date] { 
    border: 0; 
    clip-path: inset(0 17px 0 0); 
    width: 120px 
} 

https://jsfiddle.net/21zwe8yu/

+0

Das funktioniert und ist wie du sagst. FYI für alle, die Sie lesen, müssen Sie möglicherweise Js verwenden, um gezielt den Firefox-Browser gezielt, wie es nicht so gut auf Chrome und Hover-Stile funktioniert. Ich zögere, dies als die Antwort zu setzen, da es zu Konflikten mit Elementen in der Eingabe kommt. – HKG

+1

Ja, ich stimme zu. Das ist nur das Beste, mit dem ich kommen könnte. Und selbst ich habe diese Lösung letztendlich nicht selbst benutzt, als ich auf dieses Problem stieß. Ich gab einfach auf und nahm Datumseingaben von meinem benutzerdefinierten JS-basierten leeren Feld, das ich auf andere Eingaben anwendete, zugunsten des nativen für Datumseingaben. Nichtsdestotrotz dachte ich, dass einige Leute daran interessiert sein könnten, tiefer in das Kaninchenloch zu gehen, um völlig benutzerdefinierte Eingabefelder zu erstellen, und diese Herangehensweise könnte Leuten helfen, dorthin zu kommen. Obwohl ich es schließlich selbst abgelehnt habe, dachte ich, dass ich es könnte als auch post. – kethinov

Verwandte Themen