Customiser une balise select

Mise à jour du 15/01/2014 à 16h49 : Evitez d’utiliser une image comme background pour le select car Chrome ne l’affiche pas contrairement à la couleur.

Article initiale : Bonjour à tous,

Je me suis pris la tête pour arriver à customiser un select. Je me suis dis que ça pourrait vous intéresser, aussi je vous partage mes trouvailles.

Pour ceux qui ne connaissent pas le select c’est ça : .
Par défaut, un select n’est pas super sexy. Et ce n’est pas très facile de le modifier.

Voyons ensemble comme le rendre un peu plus sympa.

Code HTML


<!DOCTYPE HTML>
<head>
<meta name="charset" content="UTF-8"/>
<link rel="stylesheet" type="text/css" href="urlDuFichier/nomDuFichierCSS.css" title="style1"/>
</head>
<body>
<form action="urlDuTraitementDesDonnes" method="POST">
<select id="monSelect" name="monSelect">
<option value="1">Oui</option>
<option value="0">Non</option>
</select>
</form>
<body>

Là rien de bien exceptionnel, c’est une page web basique.

Partie CSS

Coté CSS, on va customiser le select ainsi (on le met dans « nomDuFichierCSS » qu’on a mis dans la balise link rel du head coté html):

select{
background : #DAEAF9;
border : 1px solid black;
border-radius : 5px;
padding : 3px;
}

On met une image de fond pour le select ou une couleur, c’est l’utilité du background. Si vous mettez une image, mettez aussi une couleur en fin de la ligne au cas où. En général, je vous conseille la couleur à l’image. Ensuite, on met un bord d’un pixel d’épaisse, continu et noir. C’est l’utilité du border. Le border-radius, lui sert à arrondir les coins du select.
Le padding nous permet d’avoir un petit espace intérieur de 3pixel.

Voila ce que ça donne :

Notre select est un peu plus joli, mais ce bleu n’est pas du meilleur effet. On peut le surcharger, en partie, grâce au css suivant.

option:hover{
background : img('UlrDeLimageDeFond.jpg') #CouleurRGB;
}

Ce qui nous donne :
select
La souris était sur le Oui quand j’ai fait l’imprim écran (moins chiant que de modifier les styles WordPress 🙂 ).
select2
Cet imprim écran a été fait quand la souris n’était plus sur un option.

Donc quand la souris est sur un option, on n’a plus le fond bleu, mais si on met la souris ailleurs, il revient.

Voilà comment modifier un select, sans pour autant passer par des div ou des ul li couplés à du js voir du jquery. L’avantage de cette méthode est que le select reste facilement utilisable sur mobile, contrairement à beaucoup d’autres méthodes.
J’espère que ça pourra en aider certains d’entre vous.
Pour information, cette solution ne fonctionne pas sous IE7.

Un site web, comment ça fonctionne ?

Quasiment tout le monde sait aller sur un site web, mais peu savent comment ça fonctionne.

D’abord, regardons quelques définitions qui rendront la suite plus compréhensible.

  • Serveur : c’est la machine sur laquelle est présent le site et qui s’occupera de faire les traitements nécessaires pour envoyer la page demandée
  • Client : c’est votre ordinateur qui a demandé la page
  • Base de données : endroit où sont stockées toutes les informations renseignées sur le site. Par exemple dans le cas de mon blog, les articles que j’écris, vos commentaires, l’endroit où sont stockées les images que j’ajoute aux articles, etc.
  • Site statique ou dynamique : un site statique est un site qui ne permet pas d’interaction entre le visiteur et le site, à l’inverse d’un site dynamique. Un moyen facile de comprendre la différence entre les deux : si vous avez des champs renseignables sur le site (commentaire, post sur un forum, etc), il est dynamique.

Maintenant qu’on connait ces quelques définitions, voyons comment ça marche.

De nos jours, peu de sites sont statiques. Ce qui est plus sympa pour le visiteur, car il peut interagir avec le site. Par contre, ça demande que le serveur puisse prendre en compte et comprendre ce que vous avez écris.

Site web
L’image précédente montre deux choses : premièrement que je suis nul sous paint 🙂 et deuxièmement les interactions entre le serveur et le client.

Intéressons nous à ce qu’il se passe du coté du serveur. Un site est une application informatique codée dans un langange : java ou php par exemple (il existe d’autres langages pour réaliser un site). L’application permet d’afficher la page voulue en fonction de l’adresse renvoyée, d’afficher les commentaires, de les enregistrer, etc. Pour faire simple, lorsque j’écris un nouvel article, je ne crée pas une nouvelle page. J’écris mon article, qu’ensuite le site enregistre en base de données. Lorsque vous entrez l’adresse de l’article (pas http://dvalin.info mais http://dvalin.info/2012/05/un-site-web-comment-ca-fonctionne), l’application (= le site = le code) comprend quelle est la page voulue et va chercher l’article dans la base de données. Une fois qu’il a récupéré les données, il fabrique la page et vous la renvoie.
Le serveur vous envoie une page faite en HTML (pour HyperText Markup Langage), en CSS (pour Cascading Style Sheets) et avec surement un peu de javascript (voir la définition. Bon, je sais je vous ai perdu. Mais dans le paragraphe ci-dessous, je vous explique tout ça.

De votre coté, coté client donc, vous recevez donc une page en HTML, CSS et javascript. Si vous avez lu les définitions, vous savez que le HTML sert à afficher le contenu, le CSS s’occupe de la mise en forme (ajout de couleur, ajustement de la taille de la police d’écriture, etc) et le javascript lui permet de rendre le site « vivant » (colorie un champ mal renseigné, affiche une petite fenêtre pour vous donner une information, etc. Cliquez ici pour avoir un exemple de javascript). Votre navigateur récupère tout ça et vous l’affiche.
Vous avez donc la page qui est affichée. Lorsque vous cliquez sur un lien vers une autre page, valider votre formulaire, etc, vous renvoyez des informations au serveur qui va recommencer son travail d’analyse, et un nouveau cycle de traitement de l’information recommence.

Ce qu’il faut retenir de cet article : c’est que lorsque vous allez sur un site, il ne s’affiche pas par magie. Il s’agit d’une application informatique, qui récupère votre demande, l’analyse, la traite et vous envoie le résultat de votre traitement (et lorsqu’il s’agit d’un traitement qu’elle ne connait pas, vous avez la fameuse page d’erreur).

Si vous souhaites en savoir plus sur comment coder une application web (= site web), je vous conseille d’aller faire un tour sur le site du zéro, il y a de très bons tutoriels.