Différence de width entre un select et un input
Salut à tous,
Je viens vous poser une petite question pour savoir si quelqu'un saurait pourquoi il y a une différence dans la manière dont est implémentée la "width" sur les balises "input" et "select" ?
Typiquement, le width d'un input ne prend pas en compte le padding, tandis que le width d'un select lui, le prend en compte.
J'ai fait un tout petit jsFiddle pour illustrer la chose : http://jsfiddle.net/leminipouce/vqcBg/4/
Ou si vous préférez le tester par vous même (code KISS, pure HTML, sans CSS...)...
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
<select style="width:400px;border: 5px; border-color: black; border-style: solid; margin: 20px; padding: 10px;">
<option>Toto</option>
<option>Titi</option>
</select>
</div>
<div>
<input type="text" style="width:400px;border: 5px; border-color: black; border-style: solid; margin: 20px; padding: 10px;" value="Tutu"/>
</div>
</body>
</html> |
La différence est claire... Et on peut voir tout le détail du calcul avec firebug ou la section "metrics" du debug Chrome. ...ce qui me permet d'ajouter qu'on a quand même un comportement cohérent entre Chrome et FF.
Typiquement, l'implémentation pour le select ne respecte pas la norme... http://www.w3schools.com/css/css_boxmodel.asp ! --> son attribut width devrait s'appliquer sur le contenu. La taille du padding, border et margin étant en sus dans la largeur totale du composant.
Par avance, Merci pour votre aide.
Olivier.
