nanoum.net, intégration html/xhtml, css, javascript

css

derniers articles

archives

syndication rss

bordures sur un élément selectjeudi 14 avril 2005

Si l'on teste la propriété border sur un select pour modifier la couleur d'une liste déroulante de formulaire :
on se rend vite compte que cela ne fonctionne pas sur quasiment tous les navigateurs.

Voulant tout de même obtenir ce résultat, j'ai cherché comment contourner le problème.


Utiliser les bordures d'un élément qui se placera au dessus :

On positionne un élément en absolu qui viendra se placer sur la liste. Les bordures de cet élément viendront cacher celles de la liste.
Sur internet explorer il n'est tout simplement pas possible de placer un élément au dessus d'une liste et sous firefox la liste n'est alors plus utilisable, on ne peut plus la dérouler.
On oublie.


Rogner la liste pour ne plus voir les bordures :

Première possibilité : utiliser la propriété clip : cela fonctionne sous firefox mais pas sous ie.
Seconde possibilité: donner des marges de -1px ou -2px : cela fonctionne sous ie mais pas sous firefox.

A partir de ces deux techniques, en les testant sous différents navigateurs, on se rend compte que l'on arrive quasiment à chaque fois à masquer les bordures.
Chaque navigateur interprète au moins une des deux méthodes. Il faudra alors utiliser des déclaration de styles de type html>body .classe pour forcer les navigateurs à interpréter le code voulu.

Les bordures ont donc disparu, il faudra maintenant un second élément conteneur de la liste dont la couleur de fond viendra prendre la place des bordures.

On place donc un élément, conteneur de la liste et plus grand que celle-ci.
Sous firefox, tout est bon, on obtient le résultat voulu.
Sous ie, il faudrait ajouter un padding au conteneur pour qu'il dépasse des marges négatives. Cependant, si l'élément est plus grand que la liste, les bordures supprimées réapparaissent. On obtient donc une double bordure.
On ne peut pas non plus positionner la liste en absolu sous ie car les marges de -1px ne sont alors plus prises en compte.

Essayons maintenant avec un élément non pas conteneur mais déclaré avant ou après la liste. En lui donnant une position absolue, on peut ainsi le mettre sous le select.

Le code html sera alors :<div class="conteneur">
<div>&nbsp;</div>
<select>
<option>choisir</option>
</select>
</div>

Il faut ensuite appliquer quelques modifications pour corriger les différences d'interprétation de dimensions pour internet explorer. On devra également placer les deux éléments dans un bloc conteneur en position relative.

Code css :select {
color:#999999;
width:200px;
height:22px;
border:0;
margin:-2px;
voice-family: ""}"";
voice-family:inherit;
margin:-1px;
}
html>body select {
position:absolute;
clip: rect(2px, 188px, 21px, 2px);
margin:0;
padding:0;
width:189px;
}
.conteneur div {
position:absolute;
margin-top:-1px;
margin-left:-1px;
background-color:#FF0000;
width:200px;
height:20px;
voice-family: ""}"";
voice-family:inherit;
height:22px;
width:201px;
}
html>body div.conteneur div {
margin:1px 0 0 1px;
height:21px;
width:188px;
}
.conteneur {
position:relative;
}

Au final on arrive aux résultats suivants sous différents navigateurs :

rendu sous ie 5.0
Internet Explorer 5.0 sous Win XP
rendu sous ie 5.5
Internet Explorer 5.5 sous Win XP
rendu sous ie 6
Internet Explorer 6 sous Win XP
rendu sous opera 7.54
Opéra 7.54 sous Win XP
rendu sous opera 8
Opéra 8 sous Win XP
rendu sous netscape 6
Netscape 6 sous Win XP
rendu sous netscape 7.02
Netscape 7.02 sous Win XP
rendu sous netscape 8
Netscape 8 sous Win XP
rendu sous firefox 1.0.1
Firefox 1.0.1 sous Win XP
rendu sous omniweb
OmniWeb sous Mac OSX
rendu sous safari
Safari 1.2.4 sous Mac OSX
rendu sous internet explorer 5.2
Internet Explorer sous Mac OSX


Il s'agit là d'un exercice permettant de voir si le rendu était possible. Maintenant, la solution trouvée est assez lourde et pourra certainement poser d'autres problèmes selon les navigateurs. Au final, si l'on veut vraiment personnaliser son formulaire, il est peut être plus simple d'utiliser flash.

Commentaires momentanément fermés. Merci de votre compréhension.