web-dev-qa-db-fra.com

safari iOS 5.0 non centré verticalement dans la zone de texte

Je souhaite centrer verticalement le texte saisi dans les zones de texte de saisie de la page. 

Une façon typique d’y parvenir est de définir une hauteur de ligne et une hauteur égales. Cela fonctionne sur les versions antérieures à iOS 5.0 Safari. 

Toutefois; Sous iOS 5, Safari affiche le texte tapé verticalement centré ... Mais le texte de substitution et le curseur apparaissent alignés en haut.

.txtBox {
    line-height: 3em;
    height: 3em;
}

<input type="text" class="txtBox" placeholder="Name"></input>

Quelqu'un d'autre confronté à ce problème?

cssios5mobile-safarivertical-alignmentplaceholder
26
Nirmal Patel

Paramétrer line-height: 1; semble résoudre ce problème.

36
Jesse

Pour moi, une seule solution semble parfaite dans tous les navigateurs que j'ai testés (Chrome, FF, Safari (+ iOS), IE10):

line-height: normal;

Des solutions comme line-height: 100% et line-height: 1; semblent être alignées vers le haut de l'entrée, en particulier dans Chrome.

http://jsfiddle.net/5Vc3z/

Comparaison:

http://jsfiddle.net/5Vc3z/1/

28
Marcel

Vous devez utiliser un pourcentage pour la hauteur de ligne.

.txtBox {
       line-height: 100%;
       height: 3em;
    }
<input type="text" class="txtBox" placeholder="Name"></input>
8
andychukse

En supposant que vous essayez simplement de rendre le champ de saisie plus grand, vous pouvez utiliser padding:

.txtBox {
    font-size: 1em;
    padding: 1em auto;
}

</ s> De plus, votre champ de saisie doit être:

<input type="text" class="txtBox" placeholder="Name" />

Modifier

Désolé, a pris un peu de temps. Il semble que placeholder puisse être stylé individuellement et/ou hériter des styles du parent. Malheureusement, de nombreux styles ne sont pas pris en charge par Safari pour le moment.

Le blog suivant contient des informations sur les techniques de style et celles qui ne sont pas prises en charge par certains navigateurs:

http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

2
My Head Hurts

Je suis resté bloqué sur cette question pendant longtemps malgré l'utilisation 

input::-webkit-input-placeholder { line-height:normal!important; } 

Il s'avère que le fait d'avoir une hauteur de ligne dans l'élément d'entrée lui-même était en train de rompre mon entrée :: webkit-input-placeholder line-height 

Solution étendue:

J'ai supprimé la hauteur de ligne dans mon style de saisie et mon problème a été résolu.

0
Ariella