- Works (ish) on all modern browsers and even on old browsers, such as IE8 or Android 2.3
- IE8 doesn't support :target, so selected link won't change color
- IE8/9 refuse to add pseudo elements around the buttons
- iOS, unlike anything on Android, refuses to apply :hover after touching a span/button - thus we have to use :target (works for links, span/button requires JS)
- I don't recall if it's possible to hack around the :hover limitation on iOS with tabindex and :focus... it had issues for certain.
Created
October 24, 2012 16:50
-
-
Save dominykas/3947282 to your computer and use it in GitHub Desktop.
Enlarge click areas with pseudo elements
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Large click targets</title> | |
| <style> | |
| .target | |
| { | |
| margin: 2em; | |
| padding: 1em; | |
| position: relative; | |
| border: 1px solid #000; | |
| } | |
| .target:hover | |
| { | |
| background-color: #f00; | |
| } | |
| .target:target | |
| { | |
| background-color: #0f0; | |
| } | |
| .target:before | |
| { | |
| content: ""; | |
| position: absolute; | |
| left: -3em; | |
| top: -3em; | |
| right: -3em; | |
| bottom: -3em; | |
| } | |
| .withAreas .target:before | |
| { | |
| background-color: rgba(0,255,0,0.5); | |
| } | |
| .inline | |
| { | |
| display: inline; | |
| } | |
| .inlineBlock | |
| { | |
| display: inline-block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <a href="#" onclick="document.body.className=(document.body.className==''?'withAreas':'');">Show/hide targets</a> | |
| <hr/> | |
| <a class="target inline" id="inlineLink" href="#inlineLink">inline link</a> | |
| <button class="target inline" id="inlineButton">inline button</button> | |
| <span class="target inline" id="inlineSpan">inline span</span> | |
| <hr/> | |
| <a class="target inlineBlock" id="inlineBlockLink" href="#inlineBlockLink">inline-block link</a> | |
| <button class="target inlineBlock" id="inlineBlockButton">inline-block button</button> | |
| <span class="target inlineBlock" id="inlineBlockSpan">inline-block span</span> | |
| <script> | |
| /* // uncomment to make buttons/spans work on iOS | |
| var items = [].slice.apply(document.querySelectorAll('button, span')); | |
| items.forEach(function(e) { | |
| e.onclick = function() | |
| { | |
| var href='#'+e.id; | |
| location.href=href; | |
| } | |
| }); | |
| /**/ | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment