Différence de width entre un select et un input

**leminipouce** · 09/01/2013, 17h19

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Kaamo** · 09/01/2013, 18h19

et oui, selon les navigateurs, les éléments ont des valeurs par défaut (du padding, de la border, etc ...), sinon ce n'est pas marrant

D'où les "reset CSS". ça consiste à réinitialiser toutes les balises pour leur enlever les tailles et autres fioritures misent par défaut selon le navigateur.

Pour ton problème, il suffit de dire au navigateurs que la taille de chaque élément soit celle de "width". Ainsi plus de soucis de mise en page ou d'élément qui déborde :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
box-sizing:border-box;
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;

Personnellement j'utilise ça sur tous les éléments *{ }.

Comme d'habitude, pour IE < 8 il faudra utiliser du polyfill (Celui que j'utilise). Pour la compatibilité Chrome, IE8+, Opera, Safari 5.1+ peuvent supporter sans le préfixe vendeur. Firefox en a besoin lui car y'avait un problème sur certains éléments jusque récemment. Mais il est préconisé d'utiliser tous les préfixes vendeurs (notamment pour que ça soit reconnu sur certains vieux IOS et Android. Compatibilité MDN

**Muchos** · 09/01/2013, 18h28

Pour avoir posé la question et donné la réponse, je vous aime.

**Torgar** · 09/01/2013, 23h02

Comme quoi on trouve vraiment l'amour surtout ailleurs (pour citer un site très célèbre).

**leminipouce** · 10/01/2013, 10h32

Trop bien !!!

Perso j'ai utilisé l'option content-box qui me correspond bien, mais je dois reconnaître que ça marche super bien !

Merci beaucoup.

PS : Pour ceux qui veulent voir la preuve en image, j'ai mis à jour mon jsFiddle : http://jsfiddle.net/leminipouce/vqcBg/5/

PS 2 : @Muchos : Merci beaucoup, ça me touche

... en plus j'adore les roses

Différence de width entre un select et un input [HTML 5]

HTML

Discussions similaires

Partager

Partager