Zone de texte Safari mobile Arrière-plan

Question

Une zone de texte fonctionnant correctement dans tous les autres navigateurs est en train d'apparaître dans Safari mobile. Voir l'image ci-dessous pour voir la répartition en action: L'arrière-plan par défaut apparaît sur ce que j'ai spécifié dans ma feuille de style, et sur le focus de vraies choses bizarres se passe.

http://gettinderbox.com/blogdesign/i/safarimobile.PNG

Voici le CSS et la marge:

#search_form, { 
    height: 13px; 
    width: 188px; 
    border: 1px solid #d9d9d9; 
    -moz-border-radius: 100px; 
    -webkit-border-radius: 100px; 
    background-color: #f6f6f6; 
    float: left; 
    padding: 5px; 
} 

#search_form:hover, #search_form:focus { 
    border: 1px solid #de6b2c; 
    outline: none; 
} 

<input id="search_form" type="text" name="search_form" title="Search" value="" tabindex="1" /> 

Answer 1

peut-être vous obtenez une erreur parce que vous avez une virgule après #search_form?

éditer: ok le tester sur l'iphone. Le problème n'est pas la virgule. La seule façon de le faire fonctionner dans la mesure que je sais est dans votre css:

de cette

#search_form { 
    height: 13px; 
    width: 188px; 
    border: 1px solid #d9d9d9; 
    -moz-border-radius: 100px; 
    -webkit-border-radius: 100px; 
    background-color: #f6f6f6; 
    float: left; 
    padding: 5px; 
} 

aller à ceci:

#search_form[type="text"] { 
    height: 13px; 
    width: 188px; 
    -webkit-border-radius: 100px; 
    float: left; 
    padding: 5px; 
} 

le code ci-dessus est pour mobile safari. Donnera l'apparence par défaut. Je vous conseille, si c'est votre première application web que vous construisez, essayez le framework css3 iWebKit pour iphone. Vous trouverez de très bons tutoriels, exemple et communauté.