2016-02-27 1 views
1

J'ai fait une assez simple page "Prochainement" pour un client here et j'ai un très étrange problème. Normalement, je suis le «spécialiste du CSS» de tous ceux que je connais personnellement, mais sur celui-ci, je n'ai plus de ressources/d'idées à essayer de comprendre.CSS personnalisé ne s'applique pas au champ e-mail dans le thème Enfold WP sur iPhones

Sur iPhone, en utilisant le navigateur par défaut (Safari), l'entrée email, qui a une type="text", tout comme le champ name, affiche une bordure blanche au lieu d'un bleu. La cliente a signalé le problème (elle a un iPhone6 ​​- pas sûr si S ou pas) et je l'ai testé moi-même avec une pièce ancienne (4s) que nous gardons juste au bureau pour les tests. Pour autant que je sache, border-color est une propriété CSS1, identique à border-width et border-style. Ils sont tous explicitement appliqués, donc aucun navigateur dans le monde ne devrait avoir un problème pour le rendre.

Je n'ai pas réussi à reproduire le problème dans un émulateur ou dans un outil d'extraits de sites en ligne. Je ne vois donc aucun intérêt à publier du code ici. Je suppose que quelqu'un avec des outils/environnement de débogage iOS/Safari appropriés pourrait inspecter l'élément et voir pourquoi le CSS ne s'applique pas. J'ai également testé le CSS pour les erreurs. Celui que j'ai appliqué (thème enfant) est sans bug. Le CSS du thème parent signale certains problèmes, mais il s'agit principalement de préfixes de fournisseurs. Mais c'est un bon thème, bien conçu et bien codé: Enfold de Kriesi.


EDIT: Sur d'autres tests que je viens de découvrir la propriété color est également réglé sur trop blanc, quand il devrait être le même bleu: #255AA8.

Toute idée sur la façon dont je pourrais déboguer cela (sur une machine Windows 10) est également bienvenue.

Nous vous remercions de votre temps.

Répondre

0

J'ai trouvé le problème ... dans les thèmes .js.

Apparemment, il détecte si le mobile (en quelque sorte ils le font correctement - que le script ne se déclenche pas émulateurs) et si le champ nécessite une adresse e-mail, l'attribut type est modifié text-email par js, donc la disposition du clavier de courrier électronique apparaît lorsque l'utilisateur entre son adresse e-mail.

Ajout

#top div .av-light-form input[type="email"] { 
} 

à ma liste de sélecteurs ont fait le travail.