Coins arrondis d'un select avec iPhone

Bonjour
Je veux rendre mes boutons select (listes déroulantes) arrondis avec ces attributs CSS3 :

select {
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px; 
  border-radius: 16px; 	
}

Ca se passe très bien sur Firefox. Un peu moins bien sur Safari, mais ça reste correct (le carré bleu à droite, contenant la flèche bas, déborde un peu du cadre arrondi de l'élément). Mais sur l'iPhone, c'est bien pire. Des coins carrés de couleur grise apparaissent sur 3 des 4 angles de mon élément. La couleur grise n'est pas uniforme, j'ai du gris clair en bas à gauche, et du gris foncé sur les 2 angles de droite.
Quelqu'un sait-il à quoi c'est dû ?

Bonjour,

avec le peu de choses que tu nous montres, je te dirai bien que c'est du au fait qu'il est très difficile de styliser les éléments d'un formulaire, et qu'il est plus facile de faire un " custom select " et de le styliser, plutôt que d'essayer de styliser un select basique.

PS => parfois, les formulaires sont bien mieux brut de décoffrage plutôt qu'avec plein de styles. Ce qui est bien avec cet élément, c'est qu'il rappel à l'utilisateur la tête de son environnement habituel de navigation. Plus simple pour lui de se retrouver, même si ça ne rentre pas exactement dans la charte graphique. Mais si tu acceptes qu'IE7 et 8 affichent l'élément " brut ", pourquoi pas l'iPhone ?

C'est pas moi qui décide de l'aspect graphique, malheureusement, c'est le client. Et le client veut des coins arrondis. Le comportement de base de l'iphone, c'est les coins carrés.

J'ai pu faire un screenshot de ce que j'ai obtenu avec l'iphone, vous comprendrez mieux mon problème

Ca ressemble vachement à un background avec un gradient.

As-tu essayé un : "background : transparent;" en css sur ton select ?

J'ai pas spécifié de background, l'iphone l'ajoute tout seul.
Je vais mettre un background transparent pour voir, merci du conseil

J'ai essayé avec un fond transparent, mais ça ne marche pas. La flèche bas disparaît carrément, notre liste déroulante a du coup l'aspect d'un champ texte.
J'ai aussi essayé avec un fond blanc. La flèche bas est bien là, mais les angles carrés sont là aussi.
Voyez ce que ça donne si je spécifie un fond rouge. L'élément a du coup un fond qui est un dégradé de rouge, et les angles gris sont là.

On dirait vraiment que l'iphone est buggé sur l'affiche des listes déroulantes avec coins arrondis, et pourtant on en voit sur différents sites web. Je ne comprends pas

select {
font-size:100%;
background-color:red;
-moz-border-radius: 16px;
 -webkit-border-radius: 16px; 
 border-radius: 16px; 	
}

Je vais proposer une solution qui va peut-être paraître un peu tordu, mais plusieurs framework pour mobile utilisent cette technique (iUI, jQuery mobile)

À la place d'un vrai élément <select>, créé un div que tu style simplement et que tu anime avec javascript pour donner l'impression d'une liste déroulante. (Sur les framework ils affichent la liste de choix dans un espèce d'overlay pouvant être scrollé)

bonjour,

ton image ressemble au bug de box-shadow:inset ....; avec coins arrondis. (bug de chrome en particulier)

tente un reset sur box-shadow pour voir si ce n'est pas une regle appliqué par defaut:
ex:

-webkit-box-shadow:inset 0 0 0 transparent;/* ou */ -apple-box-shadow:inset 0 0 0 transparent;

++

Hum, le coup du inset ne marche pas. Ma liste déroulante a toujours ses angles gris carrés.
Merci quand même pour l'idée

okay,

peut-on avoir le css complet pour le select ?
(autre piste : border-radius plus grand que et height par exemple )

p.s. avec !important , idem ?

idem avec un !important.
Il n'y a rien aucun autre élément CSS dans mon select, et aucun autre élément dans ma page. Je fais mon test avec les conditions les plus minimales possibles.

J'ai essayé sans mettre de coins arrondis du tout. Cette fois ça s'affiche correctement, et l'iphone rajoute tout seul des coins arrondis. Ils ne sont pas autant arrondis que ce qui est spécifié dans mes specs, mais je vais devoir m'en contenter, car visiblement on ne peut pas faire mieux.