Aligner du texte et sélectionner des cases de même largeur en CSS?
Ok, il est apparemment impossible de bien faire les choses. J'ai une zone de texte et une zone de sélection. Je veux qu’ils aient exactement la même largeur afin qu’ils s’alignent sur les marges de gauche et de droite.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>123</option>
</select>
</body>
</html>
Cela ferait vous pensez, non? Nan. La zone de sélection est 6px plus courte dans Firefox. Voir la capture d'écran. 
Ok, permet de modifier le code et de créer deux styles.
<style type="text/css">
input {
width: 200px;
}
select {
width: 206px;
}
</style>
Ok ça marche!
Oh, attendez, meilleur test sous Chrome ...
Quelqu'un peut-il me dire comment les aligner dans tous les navigateurs? Pourquoi ne puis-je pas simplement faire largeur: 200 px, pourquoi tous les navigateurs l'affiche-t-il différemment? Aussi, pendant que nous y sommes, pourquoi la zone de texte et sélectionner des hauteurs différentes? Comment pouvons-nous les obtenir à la même hauteur? J'ai essayé la hauteur et la hauteur de la ligne sans résultat.
Solution:
Ok, j'ai trouvé la solution avec l'aide des réponses ci-dessous. La clé consiste à utiliser la propriété box-sizing: border-box lorsque vous spécifiez la largeur que inclut bordure et rembourrage. Voir excellente explication ici . Ensuite, le navigateur ne peut pas le bourrer.
Le code est ci-dessous, vous avez également défini la hauteur des boîtes à la même taille et mis en retrait le texte à l'intérieur de la boîte afin de l'aligner. Vous devez également définir la bordure comme Chrome a une bordure vraiment étrange qu’elle utilise pour les boîtes de sélection qui jetteront l’alignement. Cela fonctionnera pour les sites HTML5 (par exemple, en prenant en charge IE9, Firefox, Chrome , Safari, Opera etc.).
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
border: 1px solid #000;
padding: 0;
margin: 0;
height: 22px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
text-indent: 4px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>123</option>
<option>123456789 123123123123</option>
<option>123456789 123123123123 134213721381212</option>
</select>
</body>
</html>
Un dernier avertissement, vous voudrez peut-être que les boutons de saisie, les cases à cocher, etc. ne soient pas inclus dans cette mise en forme. Utilisez input:not([type='button']) pour ne pas l'appliquer à certains types ou utilisez input[type='text'], input[type='password'] Pour spécifier ceux que vous souhaitez. appliquer à.
C'est parce que le <input type="text" /> L'élément _ a un style par défaut légèrement différent de l'élément <select> élément par exemple les valeurs de bordure, de remplissage et de marge peuvent être différentes.
Vous pouvez observer ces styles par défaut via un inspecteur d'élément tel que Firebug pour Firefox ou celui intégré pour Chrome. De plus, ces feuilles de style par défaut diffèrent d’un navigateur à l’autre.
Vous avez deux options:
- Définir explicitement les valeurs de bordure, de remplissage et de marge pour qu'elles soient identiques pour les deux éléments
- Une feuille de style CSS réinitialisée à inclure avant vos propres feuilles de style CSS
J'irais avec l'option 1. Parce que l'option 2. nécessite beaucoup de travail et vous vous retrouverez avec des tonnes de CSS inutiles. Mais certains développeurs Web préfèrent partir de zéro et avoir un contrôle total.
Cela vous rapprochera, mais ce niveau de précision est presque impossible.
<div style="width: 200px"><input type="text" style="width: 100%; margin: 0; padding: 0" /></div>
<div style="width: 200px">
<select id="Select1" style="width: 100%; margin: 0; padding: 0">
<option>1</option>
</select>
</div>
Différents navigateurs appliquent différents styles par défaut. J'ai constaté que la réinitialisation de la marge et du remplissage à 0 rend les deux éléments égaux en largeur dans Firefox et Chrome.
<html>
<head>
<title>Test</title>
<style type="text/css">
input, select {
margin: 0;
padding: 0;
width: 200px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br />
<select>
<option>123</option>
</select>
</body>
</html>
Personnellement, j’aime utiliser une feuille de style de réinitialisation CSS minimale telle que YUI CSS Reset avant d’essayer de rendre une conception aussi esthétique que possible dans plusieurs navigateurs.
Ajoutez une classe aux balises select et input en question, à savoir:
<input class='custom-input'/>
<select class='custom-input'></select>
puis modifiez le css ci-dessous pour l'adapter à votre conception:
.custom-input {
width:140px;
border:1px solid #ccc;
margin:1px;
padding:3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
}
obvs c'est un correctif pour les navigateurs compatibles
Essayez de supprimer les bordures par défaut des deux éléments:
select, input {
border:0;
}
Si vous utilisez des tableaux 4 entrées, vous pouvez utiliser la solution suivante - également compatible avec ie7:
<tr style="width:1px;"><td style="width:inherit;position:relative;">
<select style="width:100%;">
</select>
</td></tr>
<tr><td>
<input type="text" style="width:150px;"/>
</td></tr>
De cette façon, la largeur des cellules du tableau sera fixée à la largeur de l’entrée,
Et ainsi, la sélection prendrait toujours toujours la largeur restante et serait parfaitement alignée avec d entrée.
Oui, extrêmement frustrant. Cependant, je n'ai jamais eu de problèmes avec cela 'jusqu'à ce que je mette une balise "<! DOCTYPE html>" en haut de ma page HTML. Ma page Web a été correctement rendue sur toutes les plateformes que j'ai pu tester jusqu'à ce que je mette cette balise en haut de mon document.
Bien qu'il s'agisse d'une "spécification authentique", cela semble être la source de ces problèmes d'alignement. FWIW, j'utilise des éléments HTML5, des CSS en ligne, etc., le tout sans cette balise pour spécifier HTML5. YMMV.