Étiquette : pointer-events

[CSS] Rendre un input type radio ou checkbox invisible mais cliquable

Simulation jsFiddle.net

Source : make an input invisible but clickable through CSS?

Changer les dimensions d’un input type radio ou checkbox

Sources : How to change the size of the radio button using CSS? et Styling radio buttons with CSS.

Attention : sous Firefox, l’élément ne grossit pas visuellement, mais la zone cliquable oui 🙂

Cette technique est intéressante si on cherche à cacher un champ radio ou checkbox sous un élément qui le remplacerait visuellement (habillage spécifique de l’UI).

Un polyfill pour émuler les effets de la propriété CSS pointer-events sous IE9

La propriété CSS pointer-events n’est pas prise en charge par IE9 (et plus anciens). Un polyfill en jQuery nommé Pointer Events Polyfill (source GitHub) existe et fonctionne très bien.

[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