[Résolu] Safari iOS et input

Bonjour à tous,

Sur un site web, j'ai une sidebar dans lequel j'ai ajouté une barre de recherche. Sur tous les principaux navigateurs et OS, son apparence est nickel, mais sous Safari avec iOS, le input search est arrondi, c'est affreux !

Voilà à quoi ressemble mon input sous Safari iOS :


Et voilà à quoi ressemble mon input sous tous les autres navigateurs :


Il semblerait qu'on puisse palier à cette apparence par défaut, liée à iOS, avec les CSS suivants :

.sidebar-search-bar {
  border-radius: 0;
  -webkit-appearance: none;
}

Dans mon CSS, le border radius étant déjà déclaré, j'ai simplement ajouté le webkit-appearance: none puis vidé le cache de mon iPhone : rien n'y fait, c'est toujours pareil. Je ne pense pas être le seul à avoir rencontré ce souci, avez-vous donc une idée de quoi faire pour que mon input ait la même apparence sous Safari iOS que sur les autres navigateurs ?

Si cela peut aider, voici le CSS actuel de mon input :

.sidebar-search .sidebar-search-bar {
  padding: 10px;
  border: 1px solid #C0C0C0;
  border-radius: 4px 0 0 4px;
  float: left;
  width: 80%;
  background: #f1f1f1;
  margin-top: 0;
  height: 42px;
  -webkit-appearance: none;
}

Merci d'avance pour votre précieuse aide, comme d'habitude

et l'eau,

Ton souci me rapelle un truc, il me semble. As tu une url ? as tu essayé de faire un -webkit-border-radius ?
Modifié par niuxe (23 Sep 2021 - 19:48)

Salut @Niuxe,

Je viens de vérifier depuis mon iPhone, et désormais c'est nickel sous Safari... Je n'ai rien fait depuis. Après avoir vidé les caches du navigateur, ça n'avait pas fonctionné (après 15 rafraichissements), mais après quitté Safari et ré-affiché la page plus tard, mon -webkit-appearance: none; semble fonctionner et pris en compte.

Bizarre ! à ma connaissance, pas besoin de relancer le navigateur après un vidage de caches pour que ça marche, ou alors je n'ai pas bien vidé les caches de Safari ? (je suis allé dans Réglages > Safari >Effacer historique, données de site pour info, je pense que c'est la bonne façon - peut-être même la seule)

Merci pour ta réponse, je garde ton astuce sous le coude pour une petite séance de tests car je trouve que Safari iOS est régulièrement assez embêtant avec les CSS "modernes"