Comment avoir un champ de saisie transparent, sans contour et sans bordure sur le navigateur mobile Safari?

Question

Je veux obtenir les champs de saisie sur Safari sur l'iPhone pour ressembler à ceci JS FIDDLE. À l'heure actuelle, je l'ai essayé, qui ne produit pas ce que je voudrais:

.input 
    { 
    -webkit-appearance: none; 
-moz-appearance: none; 
appearance: none; 
outline: none; 
border:none; 
border-color: transparent; 
border: 0; 
outline: 0; 
background: transparent; 
border-bottom: 1px solid grey; 
width: 250px; 
} 

Les champs ressemblent à l'entrée du violon sur le bureau dans Safari, mais pas au téléphone.

Answer 1

This answer devrait être ce que vous cherchez. Vous pouvez supprimer les coins arrondis avec la propriété border-radius pour les propriétés iOS5 + et -webkit-appearance pour les versions antérieures. Donc, votre CSS devrait ressembler à ceci:

.input { 
    border: 0; 
    outline: 0; 
    background: transparent; 
    border-bottom: 1px solid grey; 
    width: 250px; 
    border-radius: 0; 
    -webkit-appearance: none; 
} 

violon Nouveau: https://jsfiddle.net/ct5s8pr9/

Answer 2

je besoin d'ajouter rayon -webkit-frontière: 0px;