18078 sujets

Questions générales et questions de débutants

[Résolu] Personnalider un <select> possible ?

Modérateur
Bonjour,

J'ai lu à plusieurs reprises qu'on peut personnaliser l'apparence des éléments <select> mais n'ai pas trouvé comment faire. J'ai cru comprendre qu'il fallait passer par du JavaScript...
Ce à quoi ressemble mon select pour l'instant :
upload/3069-select.png
css pour le style pour l'instant :
input, select {
	height: 34px;
	line-height: 34px;
	vertical-align: middle;
}

select, input, textarea {
	margin: 2px;
	padding: 0 4px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	border: none;
	font-size: 1.2em;
}

J'aimerais pouvoir modifier le style de la flèche pour dérouler le menu de sélection.

Possible ?

Merci.
Modifié par jojaba (21 Jun 2013 - 10:55)
Salut,

Pour les composants comme <select> , ton navigateur utilise celui de ton système d'exploitation. Tu peux appliquer le css que tu souhaite, sauf pour la flèche, tu peux juste la cacher. De plus IE (même version 10) ne permet pas d'intégrer des images dans la balise <option>, c'est dommage mais il est vrai que les listes déroulantes ne sont pas faites pour cela, utilise plutôt un menu déroulant.

Tu peux néanmoins avoir recours certaines ressources comme celle-ci -> http://www.onextrapixel.com/2012/10/26/custom-style-all-your-form-elements-with-pure-css-and-no-javascript/
Modérateur
Merci pour vos réponses les gars, elles vont tout à fait dans le sens que je recherchais (solutions sans js).
heatseeker a écrit :

Tu peux néanmoins avoir recours certaines ressources comme celle-ci -> http://www.onextrapixel.com/2012/10/26/custom-style-all-your-form-elements-with-pure-css-and-no-javascript/
j'ai vite regardé, ça me plaît beaucoup. Le principe est de placer la flèche après le contenu du select (width: 115%) et ensuite de cacher ce qui dépasse (c'est à dire la flèche) en faisant un overflow: hidden. Impeccable ! L'idée de remplacer cette flèche par une image de fond placée à droite dans le select se rapproche de ce que je pensais pouvoir être faisable.
Felipe a écrit :
Tu peux regarder le lien dans http://forum.alsacreations.com/topic-5-66522-1.html#p456433
C'est autant cross-browser que possible en CSS pur.
Plus globale comme approche (je veux dire par là que la css proposée s'occupe de tous les éléments de formulaire), plus long à lire et à comprendre, je vais voir ça également...
Felipe a écrit :
Toute autre valeur que vertical-align: middle pose problème, et quand un label ou un texte d'aide aligné occupe 2 lignes, mmh l'enfer
OK, je vais donc enlever ma hauterur fixe et mon line-height pour passer à nouveau à des padding afin d'uniformiser les hauteurs d'éléments. Merci.

Je vous tiens au courant de ce que j'ai mis en place. Smiley cligne
Modérateur
Bon j'y suis presque...
Petit souci pour le styling du hover et du focus ou active, je ne sias pas trop.
Voici une copie sur Chrome :
upload/3069-selct-hover.png
Je ne voudrais plus de bordure orange et de fond bleu.
J'ai fait ça, ça ne fonctionne pas :
option::focus, option::active {
	background: none;
	border: none;
	color: #000;
}

option:hover {
	background: none;
	border: none;
	color: #720b0b;
}
J'ai essayé sans double double-point, ça ne fonctionne pas non plus.
Merci d'avance Smiley cligne
Modifié par jojaba (21 Jun 2013 - 16:30)
Modérateur
Voilà, je pense que ce que j'ai mis en place est acceptable...
D'abord le code HTML :
D'abord on met en place une balise html différente pour ie7 avec des commentaires conditionnels
<!DOCTYPE html>
<!--[if IE 7]><html lang="fr" class="ie7"><![endif]-->
<!--[if (gt IE 7)|!(IE)]><html lang="fr"><![endif]-->
  <head>...</head>
  <body>...</body>
</html>

On pourrait placer ces commentaires plus loin, mais cette méthode a été démocratisée sur le Web et permet de définir d'autres styles d'autres balises pour ie7...

Le code de la boîte de sélection
<div class="styled">
  <select name="type" onchange="this.blur()">
    <option value="tous"<?php if ($type == 'tous') echo ' selected="selected"'; ?>>Tous les types</option>
    <option value="en_ligne"<?php if ($type == 'en_ligne') echo ' selected="selected"'; ?>>À faire en ligne</option>
    <option value="a_imprimer"<?php if ($type == 'a_imprimer') echo ' selected="selected"'; ?>>À imprimer</option>
    <option value="a_installer"<?php if ($type == 'a_installer') echo ' selected="selected"'; ?>>À installer</option>
  </select>
</div>

Le onchange="this.blur() permet d'enlever le fond bleu de l'otion sélectionnée dans toutes les versions de IE (voir ici : http://www.let.rug.nl/molendyk/selectboxCrossbrowser2/selectbox.html)

La css
Adaptée à mes besoins mais on peut s'en inspirer. J'ai laissé les commentaires de l'article dont je me suis inspiré : http://www.onextrapixel.com/2012/10/26/custom-style-all-your-form-elements-with-pure-css-and-no-javascript/
div.styled {
    vertical-align: middle;
    margin: 2px;
    Padding: 1px 0;
    width: 30%;
    min-width: 195px;
    display: inline-block; /* pour pouvoir afficher deux boîtes l'une à côté de l'autre */
    overflow: hidden; /* this hides the select's drop button */
    background: #FFF url(img/select.png) no-repeat center right; /* L'icône flèche */
}

div.styled select {
	width: 115% /* this percentage effectively extends the drop down button out of view */;
    background-color: transparent /* this hides the select's background making any styling visible from the div */;
    background: none;
    -webkit-appearance: none /* this is required for Webkit browsers */;
    border: none;
    box-shadow: none;
    cursor: pointer;
}

div.styled, input, textarea {
    border: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    font-size: 1.2em;
}

/* Traitement du cas ie7, on laisse la boîte dans son état original */
.ie7 div.styled {border:none; display: inline; }
.ie7 div.styled select {
    width: 100%;
    background-color: #FFF;
    border: solid 1px #ccc;
    padding:0.3em 0.5em;
}

L'icône que j'ai utilisée : upload/3069-ico-select.png

Copies d'écran
IE7
upload/3069-select-ie7.png

IE8
upload/3069-select-ie8.png

IE9 et 10
upload/3069-select-ie9-.png

FF
upload/3069-select-ff.png

Chrome
upload/3069-select-goog.png

Reste à faire
J'aimerais pouvoir enlever la bordure orange que l'on voit autour de l'option sélectionnée dans Chrome (j'ai essayé tous les pseudos-class possibles active, focus, selected,...). Ce serait bien si on pouvait également modifier la couleur de fond au hover des options (pour l'instant partout en bleu). J'ai essayé avec un option:hover mais clea ne fonctionnait qu'avec IE10...
Si vous avez un conseil là-dessus, je suis preneur Smiley cligne
Modérateur
Bon, j'ai fait rapidement quelques tests pour ce qui concerne le changement de style des balises options. Le grand gagnant est... IE ! Eh oui, c'est le seul qui permet de modifier la couleur de texte, le fond et la modification du style au hover des balises options.
Comme il était difficile de faire beaucoup mieux que ce que je propose ci-dessus sans utiliser d'artifices plus complexes (Javascript, jQuery ou Flash), je considère le problème résolu.
Petit diaporama trouvé sur le Web concernant justement le styling des éléments select :
http://fr.slideshare.net/jdmedina17/the-html-ltselect-tag

Merci encore pour votre coup de pouce.
Modifié par jojaba (22 Jun 2013 - 18:04)
Merci à toi de faire partager ton travail. Pour IE petit bémol car il ne permet pas de mettre des images dans la balise <option> du select.

Bonne soirée.
Salut a tous je suis nouveau en programmation, j'aimerais avoir le code source pour que lorsque
Ex: lorsqu'on choisir un pays on peut unique voir ses villes.
Relier chaque pays a sa ville.
Pays: France
Ville: Paris
Sujet clos
Aller à