[Résolu] La hauteur de l'input texte

Bonjour ,
J'ai un petit souci avec la hauteur de l'input texte:
A l'affichage, il y a toujours des pixels en plus! meme quand je met padding:0.
Et ceci, me pose des problemes lorsque je dois alligner le texte avec un bouton par exemple: meme si j'attribue la meme hauteur au bouton et au texte, je me retrouve avec un décalage vértical à cause des pixels en plus.

Merci d'avance pour votre aide.

Hello,

Dans tous les navigateurs ? Sous quel système d'exploitation ?
Peut-on voir à quoi ressemble vos codes ?
Une page de test en ligne, ce serait parfait

Bonjour,

comme le sous-entend 6l20, le résultat est par défaut différent dans tous les navigateurs et OS (car il n'y a pas un style par défaut imposé par une quelconque norme, encore plus pour les formulaires que pour le reste).
Pour commencer, la fonte par défaut (une monospace) et la taille de texte (13.3px) sont différentes dans les input de Firefox. Chrome ne laissera rien faire tant qu'il n'y aura pas -webkit-appearance: none; (et ensuite il faut tout refaire, ha !).
Bref, plein de détails et quand on croit avoir un truc globalement pas mal, c'est là qu'en améliorant un aspect dans un navigateur on se rend compte que ça fiche en l'air le résultat dans un autre mais que, etc arrachage de cheveux garanti (surtout vrai si on veut un alignement vertical ou une hauteur au px près).
J'ai utilisé http://isellsoap.github.io/forms.css/ pour normaliser tout ça mais il existe d'autres bibliothèques qui ont fait le dur boulot de "normaliser" ça (normalize.css, peut-être PURE, etc)

2 conseils pour l'alignement vertical :
- vertical-align: middle pour les input et tout ce qui doit être aligné avec. Tu n'arriveras jamais à aligner dans tous les navigateurs et tous les OS sinon (toujours 1px de décalage dans l'un ou l'autre)
- pour les éléments button, Firefox ne te laissera PAS modifier l'alignement vertical du texte. Il faut donc positionner le texte dans les autres navigateurs, inutile d'espérer corriger après coup quoi que ce soit dans Firefox

Bonjour,
Merci bq pour votre interet,
Voici la page sur laquelle je m'entrenne: http://www.tool-online.com/test.php
(le petit globe avec une loupe)
Modifié par yassinbean (22 Dec 2013 - 20:12)

salut,
il faut ajouter un "box-sizing:border-box" sur ton input texte et "vertical-align:middle" pour tes input à aligner. À préfixer pour Mozilla et Webkit.

<input type="button" /><input type="text" />

input {
	vertical-align:middle;
}

input[type=button] {
    width: 40px;
    height: 24px;
    border: 1px solid green;
    background: url(http://www.tool-online.com/Images/Rechercher.png);
}

input[type=text] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 160px;
    height: 24px;
    border: 1px solid green;
}

Bonjour,
Merci enormement pour la solution, je vais l'appliquer.