Étiquette : select

[CSS] Habiller l’élément Select de formulaire – les techniques en CSS pur

Solution pour remplacer le chevron par défaut par un picto encodé en base64

Code CSS à mettre en place:

[jQuery] Redimensionner automatiquement un element HTML Select en fonction de la largeur de l’Option sélectionnée

Source: Auto resizing the SELECT element according to selected OPTION’s width. Voir le jsFiddle ici.

Cas particulier: la page se recharge après sélection

Source: Persist variables between page loads.

[jQuery][dataTables] Report des libellés d’en-têtes dans les éléments Select correspondant

Un petit code bit pour le projet https://datatables.net/ qui permet le report des libellés d’en-têtes dans les éléments Select correspondant.

Attention à bien placer et renseigner le data-heading dans la source HTML:

[RBS Change 3.6.x] Détecter un choix utilisateur via l’élément HTML Select/Option avec jQuery

Cas du bloc Switchlanguage dans Change 3.6.x

Objectif: au choix de la langue via l’élément <select />, on redirige vers la page traduite.

Côté template, on boucle sur les langues disponibles. On stocke l’URL de la page de destination via l’attribut value de l’élément option.

En jQuery, on détecte un choix d’option via l’élément HTML <select />, on récupère la valeur de l’attribut value (l’URL de la page de destination) et on lance la redirection.

[jQuery] Simuler un élément Select à partir d’une liste HTML

select-ul

[CSS] Styler tous les éléments de formulaires de façon sexy et uniquement avec CSS

Source : Custom Style All Your Form Elements with Pure CSS and No JavaScript

Styler l’élément HTML Select avec CSS

(Works in IE8+, FF, Webkit)

Une variante sans image de fond avec Bootstrap 3 et le composant CSS .caret

sexy-select_variante_bootstrap-caret

[CSS] Activer un champ Select en cliquant à travers un élément sous-jacent avec la propriété CSS pointer-events

Source : Click through a DIV to underlying elements

Astuce utile lorsqu’on veut exploiter, sur périphériques mobiles et tactiles (smartphones, tablettes), le widget de l’élément de formulaire <select /> proposé nativement par les navigateurs.
Ci-dessous affichage dans un navigateur desktop vs. smartphone.

Attention : la partie javascript visant à changer le visuel du drapeau en fonction du choix de l’utilisateur ne fonctionne en l’état que si la page est entièrement rechargée.
On ne peut pas simuler le clic sur un élement <select /> en jQuery.

widget_select