{"id":334279,"date":"2021-02-12T12:03:56","date_gmt":"2021-02-12T20:03:56","guid":{"rendered":"https:\/\/css-tricks.com\/?p=334279"},"modified":"2021-02-12T12:03:59","modified_gmt":"2021-02-12T20:03:59","slug":"dont-put-pointer-events-none-on-form-labels","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/dont-put-pointer-events-none-on-form-labels\/","title":{"rendered":"Don\u2019t put pointer-events: none on form labels"},"content":{"rendered":"\n<p>Bruce Lawson with the tip of the day, warning against the use of <code>pointer-events: none<\/code> on forms labels. We know that <code>pointer-events<\/code> is used to change how elements respond to click, tap, hover, and active states. But it apparently borks form labels, squashing their active hit target size to something small and tough to interact with. Bruce includes examples in his post.<\/p>\n\n\n\n<p>That&#8217;s not the striking part of the post though. It&#8217;s that the issue was pinned to an implementation of <a href=\"https:\/\/material.io\/develop\/web\/supporting\/floating-label\" rel=\"noopener\">Material Design&#8217;s floating labels component<\/a>. Bruce fortunately had pointer events expert Patrick Lauke&#8217;s ear, who <em>pointed<\/em> (get it?) out the issue.<\/p>\n\n\n\n<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">aha, now i remember when i first saw a few weeks ago &#8211; testing something based on material design for web <a href=\"https:\/\/t.co\/YkEKXkU0To\">https:\/\/t.co\/YkEKXkU0To<\/a> <a href=\"https:\/\/t.co\/31S74X1i4R\">pic.twitter.com\/31S74X1i4R<\/a><\/p>\u2014 patrick h. lauke #toryScum #clapForFlagWankers (@patrick_h_lauke) <a href=\"https:\/\/twitter.com\/patrick_h_lauke\/status\/1357715292345016322?ref_src=twsrc%5Etfw\" rel=\"noopener\">February 5, 2021<\/a><\/blockquote> <script async=\"\" src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script>\n\n\n\n<p>That isn&#8217;t a dig at frameworks. It&#8217;s just the reality of things. <a href=\"https:\/\/css-tricks.com\/front-end-developer-aware\/\">Front-end developers gotta be aware<\/a>, and that includes awareness of third-party code.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Bruce Lawson with the tip of the day, warning against the use of pointer-events: none on forms labels. We know that pointer-events is used to change how elements respond to click, tap, hover, and active states. But it apparently borks form labels, squashing their active hit target size to something small and tough to interact [&hellip;]<\/p>\n","protected":false},"author":2508,"featured_media":296029,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[632,1253],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/pointer-click.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":320427,"url":"https:\/\/css-tricks.com\/interaction-media-features-and-their-potential-for-incorrect-assumptions\/","url_meta":{"origin":334279,"position":0},"title":"Interaction Media Features and Their Potential (for Incorrect Assumptions)","date":"September 14, 2020","format":false,"excerpt":"The Media Queries Level 4 Interaction Media Features \u2014 pointer, hover, any-pointer and any-hover \u2014 are meant to allow sites to implement different styles and functionality (either CSS-specific interactivity like :hover, or JavaScript behaviors, when queried using window.matchMedia), depending on the particular characteristics of a user\u2019s input device.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/pointer-click.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":274571,"url":"https:\/\/css-tricks.com\/stuff-you-can-do-with-css-pointer-events\/","url_meta":{"origin":334279,"position":1},"title":"Stuff you can do with CSS pointer events","date":"July 27, 2018","format":false,"excerpt":"Martijn Cuppens (the same fella with the very weird div!) has some more irresistible CSS trickery. Three of the examples are about making a child element trigger an event on a parent element (almost like the magic that is :focus-within). Here's how I reasoned it out to myself: You know\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/pointer-events-child-parent.gif?fit=700%2C350&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":274867,"url":"https:\/\/css-tricks.com\/building-battleship-in-css\/","url_meta":{"origin":334279,"position":2},"title":"Building Battleship in CSS","date":"August 16, 2018","format":false,"excerpt":"This is an experiment to see how far into an interactive experience I can get using only CSS. What better project to attempt than a game? Battleship seemed like a good challenge and a step up from the CSS games I\u2019ve seen so far because it has the complexity of\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/battleship.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":6379,"url":"https:\/\/css-tricks.com\/pointer-events-current-nav\/","url_meta":{"origin":334279,"position":3},"title":"Pointer Events &#038; Disabling Current Page\u00a0Links","date":"May 17, 2010","format":false,"excerpt":"It is a long-standing web design standard that the logo in the header area links to the homepage of the site. Another standard is that when displaying the navigation of a site, to highlight in some way the \"current\" page, if it is present in the navigation. I think those\u2026","rel":"","context":"In &quot;Advanced&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":337504,"url":"https:\/\/css-tricks.com\/some-articles-about-accessibility-ive-saved-recently\/","url_meta":{"origin":334279,"position":4},"title":"Some Articles About Accessibility I&#8217;ve Saved Recently","date":"April 6, 2021","format":false,"excerpt":"\"Good news about display: contents and Chrome\"\u2009\u2014\u2009Rachel Andrew notes that the accessibility danger of using display: contents; is fixed in Chrome. The problem was that, say you had a parent div that is laid out as a grid and inside you have a <ul> with <li> elements, and you wanted\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/accessibility-a11y.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":269378,"url":"https:\/\/css-tricks.com\/creating-a-panning-effect-for-svg\/","url_meta":{"origin":334279,"position":5},"title":"Creating a Panning Effect for SVG","date":"April 18, 2018","format":false,"excerpt":"Earlier this month on the Animation at Work Slack, we had a discussion about finding a way to let users pan inside an SVG. I made this demo below to show how I'd approach this question: See the Pen Demo - SVG Panning by Louis Hoebregts (@Mamboleoo) on CodePen. Here\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/04\/svg-panning-effect.gif?fit=900%2C450&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/pointer-click.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/334279"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/2508"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=334279"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/334279\/revisions"}],"predecessor-version":[{"id":334281,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/334279\/revisions\/334281"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/296029"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=334279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=334279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=334279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}