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?
Paramétrer line-height: 1;
semble résoudre ce problème.
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.
Comparaison:
Vous devez utiliser un pourcentage pour la hauteur de ligne.
.txtBox {
line-height: 100%;
height: 3em;
}
<input type="text" class="txtBox" placeholder="Name"></input>
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" />
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:
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.