Apparence de la date du type d'entrée dans Safari sur iOS

Je suis en train d'utiliser un apport régulier de type date pour une utilisation sur des appareils mobiles. Mais la largeur définie dans le CSS est annulée par Safari (ou webkit).

Je peux ajouter -webkit-appearance: none; à la CSS, et par qui, la largeur de travail comme prévu. Mais puis-je perdre tous les autres style voulu, par exemple la flèche pour indiquer qu'il s'agit d'un sélecteur.

Est-il un moyen que je peux garder le style de base d'un type d'entrée date, mais la règle sur la largeur de moi?

source d'informationauteur SamJ

  1. 11

    -webkit-appearance: none; ne retirez toujours le style typique d'un sélecteur... Mais vous pouvez facilement ajouter une flèche à l'aide de CSS et un background-image.

    Je ne suis pas au courant d'une façon personnalisée de style de l'entrée, mais aussi en gardant la flèche.

  2. 9

    Ajouter -webkit-min-logical-width: <your desired value>. Il a résolu le problème pour moi!

  3. 2

    si vous souhaitez sélectionner uniquement input[type='date'] et input[type='time']
    essayez cette CSS ligne.

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

    J'ai constaté que pour obtenir 100% de la largeur correcte comme par @Boldizsar répondre vous avez besoin d'un peu de CSS calc action d'enlever la largeur ajouté par la flèche de menu déroulant sur iOS.

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