Simulation jsFiddle.net
Source : make an input invisible but clickable through CSS?
|
1 2 3 |
input { opacity: 0; } |
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.
|
1 2 3 4 5 |
input[type=radio] { border: 0px; width: 100%; height: 2em; } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
/* * Pointer Events Polyfill: Adds support for the style attribute "pointer-events: none" to browsers without this feature (namely, IE). * (c) 2013, Kent Mewhort, licensed under BSD. See LICENSE.txt for details. * https://github.com/kmewhort/pointer_events_polyfill */ // constructor function PointerEventsPolyfill(options){ // set defaults this.options = { selector: '*', mouseEvents: ['click','dblclick','mousedown','mouseup'], usePolyfillIf: function(){ if(navigator.appName == 'Microsoft Internet Explorer') { var agent = navigator.userAgent; if (agent.match(/MSIE ([0-9]{1,}[\.0-9]{0,})/) != null){ var version = parseFloat( RegExp.$1 ); if(version < 11) return true; } } return false; } }; if(options){ var obj = this; jQuery.each(options, function(k,v){ obj.options[k] = v; }); } if(this.options.usePolyfillIf()) this.register_mouse_events(); } // singleton initializer PointerEventsPolyfill.initialize = function(options){ if(PointerEventsPolyfill.singleton == null) PointerEventsPolyfill.singleton = new PointerEventsPolyfill(options); return PointerEventsPolyfill.singleton; }; // handle mouse events w/ support for pointer-events: none PointerEventsPolyfill.prototype.register_mouse_events = function(){ // register on all elements (and all future elements) matching the selector jQuery(document).on(this.options.mouseEvents.join(" "), this.options.selector, function(e){ if(jQuery(this).css('pointer-events') == 'none'){ // peak at the element below var origDisplayAttribute = jQuery(this).css('display'); jQuery(this).css('display','none'); var underneathElem = document.elementFromPoint(e.clientX, e.clientY); if(origDisplayAttribute) jQuery(this) .css('display', origDisplayAttribute); else jQuery(this).css('display',''); // fire the mouse event on the element below e.target = underneathElem; jQuery(underneathElem).trigger(e); return false; } return true; }); }; |