Discussion :

[_SlyK]

Hello,

J'ai voulu enlever la flèche qui se trouve à droite d'un select afin d'en faire une personnalisée.

J'ai donc voulu utilisé ce code :

Code :

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

1
2
3
4
5
select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
}

FF ne 'capte' pas très bien est affiche quand même la flèche, je suis donc passé comme cela :

Code :

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

1
2
3
4
5
select {
    -moz-appearance: button;
    -webkit-appearance: none;
    appearance: none;
}

http://jsfiddle.net/SsTHA/357/

Le problème est que lorsque qu'on ajoute un border-radius le style bug denouveau sur Firefox...

Code :

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

1
2
3
4
5
6
7
select {
    -moz-appearance: button;
    -webkit-appearance: none;
    appearance: none;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

http://jsfiddle.net/SsTHA/358/

Quelqu'un aurait un hack ou une solution ?

PS : Résultat désiré : http://jsfiddle.net/SsTHA/359/


Merci.
Cordialement.

[Boris56]

Le mieux pour stylé les divers éléments des formulaires comme les select, radio & check-box c'est d'utiliser un script JS qui "transforme" la balise <select>, par exemple, en un code HTML stylisable.

uniformjs.com est très bien

[_SlyK]

Re !

Merci pour ta réponse.

A vrai dire, j'essaie d'utiliser le moins de JavaScript possible, mais je vais regarder ton API et voir si je peux faire ce que je veux.

Si tu l'as déjà utilisé dis moi si c'est possible de faire quelque chose comme ça : http://jsfiddle.net/eC64s/



Cordialement.

[Boris56]

C'est le genre de chose où tu ne peut pas te passer de J.S., mais se genre de plugin JavaScript pèse pas lourd et son très bien adapté au usage actuelle , je l'utilise sur la plupart de mes projets, tout dépend du besoin.

[N4rc0]

Sinon au lieu de télécharger la librairie JS, tu peux le faire manuellement.

Le "concept" pour personnaliser tous les éléments d'une page html, notamment les select (mais aussi application pour les input de type="file" par exemple), c'est d'englober ton select dans un div, que tu personnalises à souhait (apparence d'input, ajout d'image pour la flèche, etc ...).

Ensuite, tu appliques à ton select (toujours contenu dans ton div) un style css qui aura une opacité à 0. Ainsi il sera toujours présent, et fonctionnel, mais non visible.
Donc un click sur le div déclenchera le déroulement de la liste de ton select.

En ce qui concerne la récupération de la valeur choisie dans le select, il suffit que tu inclue un <span> dans ton div, au même niveau que ton select, et avec une petite fonction javascript ou Jquery, intégrer la valeur dans ce span.

Tu auras les mêmes effets que le select, même avec l'apparence voulue.

Résumé :

Code html :

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

1
2
3
4
5
6
7
8
<div>
   <span></span>
   <select>
     <option></option>
     ....
     <option></option>
   </select>
</div>

[_SlyK]

Re !

Superbe idée, en attendant j'ai fait quelque chose qui ressemble à peu pret, mais je vais modifier pour faire comme tu l'as proposé.

Merci !


Cordialement.