Input-Typ date Aussehen in Safari auf iOS

Ich versuche, einen regelmäßigen input type Datum für die Verwendung auf mobilen Geräten. Aber die Breite festgelegt in der CSS-Datei wird aufgehoben, indem Sie Safari oder webkit).

Kann ich hinzufügen -webkit-appearance: none; zu den CSS-und damit die Breite wird wie erwartet funktionieren. Aber dann verliere ich alle anderen styling, das wollte, zum Beispiel den Pfeil, um anzuzeigen, dass es ist ein picker.

Gibt es eine Möglichkeit, dass ich kann halten die basic-styling von einer input-Typ date, aber die Herrschaft über die Breite selbst?

Eine interessante Frage. Ich habe mich schon gefragt, auch warum webkit auf diese Weise verhält.
haben Sie versucht, um important!?
Werfen Sie auch einen Blick auf diese Frage: stackoverflow.com/questions/5615980/...
Ja, ich habe versucht mit !wichtig, aber es macht keinen Unterschied.

InformationsquelleAutor SamJ | 2013-08-22

  1. 11

    -webkit-appearance: none; nicht immer entfernen Sie den typischen Stil eines picker... Aber Sie können leicht hinzufügen einen Pfeil, mit CSS ein background-image.

    Ich bin mir nicht bewusst einen Weg, um benutzerdefinierte Stil der input, sondern auch das halten des Pfeils.

    Ja, so habe ich behoben. Wie es scheint, eine übermäßige Art und Weise zu verändern die Breite des Elements, aber es könnte nicht anders sein. Vielen Dank!

    InformationsquelleAutor Dion

  2. 9

    Hinzufügen -webkit-min-logical-width: <your desired value>. Es löste das problem für mich!

    Es scheint, dass die toggle-Pfeil platziert wird außerhalb des Elements. Also width=100% wird es zu groß.
    Wenn Sie CSS verwenden, calc und minus 16px, der Pfeil, das funktioniert perfekt. -webkit-min-logical-width: calc(100% - 16px);

    InformationsquelleAutor Boldizsar

  3. 3

    wenn Sie möchten, wählen Sie nur input[type='date'] und input[type='time']
    versuchen Sie, diese CSS-Zeile.

    input[type='date'], input[type='time'] {
    -webkit-appearance: none;
}

    InformationsquelleAutor eclaude

  4. 1

    Habe ich festgestellt, dass man Breite 100% korrekt, da pro @Boldizsar Antwort, die Sie brauchen ein wenig CSS calc Aktion zum entfernen der Breite Hinzugefügt werden, indem Sie die dropdown-Pfeil auf iOS.

    -webkit-min-logical-width: calc(100% - 16px);

    InformationsquelleAutor Phil Cook

Schreibe einen Kommentar