Lorsqu’on donne une hauteur height à un champ input, il arrive que le texte saisi à l’intérieur ne s’aligne pas correctement avec la base du texte présent dans le label. Dans ce cas, je diminue la hauteur et je distribue un soupçon de padding en haut et/ou en bas selon l’alignement souhaité.

Pour un champ input de 20px de haut, on aura ainsi les valeurs :

input {
    height: 13px;
    padding: 3px 0 4px 0;
}

Pour une hauteur identique à :

input {
    height: 20px;
}

And the cat’s in the bag!

Articles sur le même sujet

• 10 bonnes pratiques pour des formulaires HTML efficaces
• Styler vos champs de formulaires de recherche avec CSS
• Personnalisez vos formulaires avec CSS et Javascript
• Design de formulaire HTML avec CSS
• Trucs et astuces CSS