28172 sujets

CSS et mise en forme, CSS3

[Résolu] Box-sizing différent entre un input et un select

Bonjour,

Mon objectif est à la base assé simple:
placer dans une boite un SELECT et un INPUT(type text) et faire en sorte qu'ils prennent tous les deux toute la largeur de la boite.
<div>
	<select>
		<option> factice </option>
		<option> exemple </option>
	</select>
	<input type="text"/>
</div>

Je fixe la largeur de la boite et demande aux deux éléments d'occuper 100% de celle-ci.
J'ajoute aussi quelques fioritures.
div{
	width:	200px;
	border:	solid 5px black;
	padding:	3px;
}
select{
	width:	100%;
	border:	solid 2px red;
	padding:	1px;
}
input{
	width:	100%;
	border:	solid 2px red;
	padding:	1px;
}


Et alors que je souhaite que mes deux éléments soit de même largeur, ce n'est pas le cas.
upload/11935-pbSelectIn.PNG
L'INPUT à effectivement une largeur de 200px, comme son père, mais le SELECT à une largeur de 194px, soit les 200px du père, moins ses padding gauche et droit de 1px et ses border gauche et droit de 2px.

En claire, l'INPUT adopte le modèle de boite préconisé par le W3C et le SELECT le modèle de boite du quirks mode.

Ayant les même résultat sur IE6 IE7 et FF3, j'en viens à penser qu'il s'agit d'un "bug" de la spécification W3C... ou alors il y a quelque chose d'assé capital que je n'ai pas compris.

Pour résoudre mon soucis j'ai essayé de jouer avec la propriété box-sizing défini dans CSS3 et plus ou moins supporté par les navigateurs et j'ai donc ajouté à ma feuille de style les propriétés suivantes:

-ms-box-sizing:		content-box;
-moz-box-sizing:		content-box;
box-sizing:			content-box;
-webkit-box-sizing:	content-box;

Le problème est alors réglé pour FF3 mais ni pour IE6 ni IE7.
De même avec une valeur broder-box au lieu de content-box.

Donc plusieurs questions:
- pourquoi SELECT à un modèle de boite incluant les padding et les broder alors que je ne suis pas en quirk mode ?
- comment résoudre mon problème si les propriété box-sizing ne fonctionnent pas sous IE ?


J'espère avoir fait une présentation complète du problème et merci d'avance pour votre aide.
Modifié par LeeRoy (26 Aug 2009 - 12:05)
LeeRoy a écrit :
- pourquoi SELECT à un modèle de boite incluant les padding et les broder alors que je ne suis pas en quirk mode ?

Sans doute parce qu'un SELECT n'est pas une boite.

(En passant, redéfinir les bordures d'un SELECT c'est mal. Les deux seules propriétés CSS qu'on devrait utiliser sur cet élément sont width et vertical-align. Smiley ohwell )

LeeRoy a écrit :
- comment résoudre mon problème si les propriété box-sizing ne fonctionnent pas sous IE ?

Si tu peux donner des largeurs fixes en pixels à tes SELECT et INPUT, il faut tenir compte des spécificités des uns et des autres et donner des largeurs différentes. Les navigateurs traitent les SELECT comme un tout car ce sont, pour l'essentiel, des éléments que le navigateur dessine entièrement sans passer par des styles CSS (en dehors éventuellement de mécanismes internes). On ne peut pas modifier le padding d'un SELECT, par exemple. À l'inverse, les navigateurs traitent souvent les INPUT de type text comme des boites, avec quelques spécificités comme la gestion de la largeur (width: auto donne une largeur par défaut plutôt qu'une adaptation à la largeur du conteneur) et le dessin des bordures par défaut.

À ma connaissance, ni CSS2 ni CSS3 ne spécifient le détail du rendu des éléments de formulaire.

Une autre solution pour avoir des INPUT et SELECT de même largeur dans un conteneur de largeur variable:
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<title>Largeur 100% d'éléments `select` et `input`</title>
	<style>
	 div {
		  width: 30%;
		  border: 10px solid #FAA;
	 }
	 input {
		  width: 100%;
		  padding: 3px 2px;
		  border: 4px solid gray;
	 }
	 select {
		  width: 100%;
	 }
	 .input-wrapper {
		  display: block;
		  margin-right: 12px;
	 }
	</style>
</head>
<body>

<div>
	 <input type="text" />
	 <br />
	 <span class="input-wrapper"><input type="text" /></span>
	 <br />
	 <select>
		  <option>Test</option>
	 </select>
</div>

</body>
</html>

Modifié par Florent V. (25 Aug 2009 - 14:48)
Ma première erreur a effectivement été de croire que select était une boite, mais à ma décharge son fonctionnement sous FF en est très proche. On peut par exemple modifier les bords ou y mettre des padding.
Mais ce qui est encore plus vicieux est que sous IE alors qu'effectivement il n'affiche ni padding ni bordure spécial, tous ces éléments sont pris en compte dans le calcul de la largeur du select.

En tout cas merci beaucoup, car j'avais déjà étudier la piste de l'encapsulation dans un bloc, mais je n'arrivais pas au résultat attendu car je mettais ce bloc à 100%.
Hello Smiley smile

Bingo, ceci était justement ma question du jour.

Merci déjà, pour les pistes explorées.

Ensuite Florent :

Florent V. a écrit :
(En passant, redéfinir les bordures d'un SELECT c'est mal. Les deux seules propriétés CSS qu'on devrait utiliser sur cet élément sont width et vertical-align. Smiley ohwell )


Pourrais tu préciser un peu ceci s'il te plait ? Smiley rolleyes
Sujet clos
Aller à