Timeline for Can I have an onclick effect in CSS?
Current License: CC BY-SA 4.0
62 events
| when toggle format | what | by | license | comment | |
|---|---|---|---|---|---|
| Mar 2 at 0:06 | comment | added | TylerH | @MehdiCharife Input doesn't accept children; it's a self-closing tag. | |
| Mar 1 at 7:07 | comment | added | Mehdi Charife | Why not just use the input field and have the image inside it instead? | |
| Feb 3 at 18:41 | comment | added | TylerH | @ThomasHaz Yes, the concept works with radio buttons as well: jsfiddle.net/TylerH/65ojphx1 I just used checkboxes because that's generally the element people use when they refer to the checkbox hack :-) It's much less common for someone to need a connected list of "onclickable" elements. | |
| Feb 2 at 10:58 | comment | added | ThomasHaz | I haven't tested it, but surely you could use radio buttons to achieve the same effect? This would ensure that only one element would be checked at the same time (assuming they are in the same group). | |
| Nov 15, 2024 at 16:33 | history | edited | TylerH | CC BY-SA 4.0 |
Updating link to use Picsum which should be a little more reliable than random cat picture generators.
|
| S Nov 15, 2024 at 16:33 | history | suggested | Laurent FAVOLE | CC BY-SA 4.0 |
Fix broken URL
|
| Nov 15, 2024 at 12:38 | review | Suggested edits | |||
| S Nov 15, 2024 at 16:33 | |||||
| May 10, 2024 at 13:52 | history | edited | TylerH | CC BY-SA 4.0 |
Fixing broken URL
|
| Aug 1, 2022 at 14:05 | comment | added | TylerH | @LukeHutchison That's pretty close, yeah, but it lacks the ability to unset (e.g. clear selection) entirely without some other code being added to do that. You can change which button is set by clicking the other buttons in the group, but once you click one of them, one will at least always be clicked. | |
| Jul 31, 2022 at 10:43 | comment | added | Luke Hutchison | This also works with radio buttons, not just checkboxes. The following project uses this to implement pure-CSS tabs, using restyled radio buttons. github.com/johnuberbacher/CSS-Tabs | |
| Jul 18, 2022 at 13:38 | history | edited | TylerH | CC BY-SA 4.0 |
Removed 'answer as of <year>' blurb at the start; while a good idea initially, it gets outdated quickly (and often), and is not as needed now because there is a new "trending sort" answer available, and accepted answers have been unpinned from the top.
|
| Jul 26, 2021 at 17:41 | history | edited | TylerH | CC BY-SA 4.0 |
Firefox unfortunately regressed and removed support for -moz-outline-radius in v88 through v91, so I'm removing it from the answer.
|
| Dec 30, 2020 at 20:36 | comment | added | TylerH | @java.web Yes they are separate events (and I was sleepy when I mixed up "key" and "mouse" :-)). The distinction between effect and event is mostly academic. The effect of a mouse click is a down followed by an up, which is the point of my statements in the comments and the answer. I did not say that mousedown and mouseup only exist inside/as part of a 'mouse click effect'. | |
| Dec 30, 2020 at 19:41 | comment | added | jave.web | @TylerH that is true indeed, however the question is "effect" not "event", but you are right that the label hack behaves more like a click event | anyways, let me correct you on those events: onclick does not have subevents and you probably meant "onmousedown" and "onmouseup" - regardless - those are 3 separate events, you can have mousedown and mouseup trigger without triggering click event (typically drag&drop). | |
| Dec 29, 2020 at 19:09 | comment | added | TylerH |
@jave.web If you mean this answer by Blake, focus is not the same kind of event as onclick, which consists of separate "onkeydown" and "onkeyup" 'sub' events; focusing produces the same effect as the former, but doesn't cover the latter.
|
|
| Dec 29, 2020 at 19:07 | comment | added | jave.web | @TylerH It's an alternative solution mentioned down below here, I guess I was just pointing out you didn't mentioned it in your 2020 update :) | |
| Dec 25, 2020 at 0:14 | comment | added | TylerH |
@jave.web what about it? tabindex wasn't mentioned in the question.
|
|
| Oct 26, 2020 at 7:07 | comment | added | jave.web | What about that tabindex though? | |
| Jun 30, 2020 at 14:16 | history | edited | TylerH | CC BY-SA 4.0 |
http -> https
|
| Jun 20, 2020 at 9:12 | history | edited | CommunityBot |
Commonmark migration
|
|
| Aug 26, 2019 at 13:19 | comment | added | TylerH | @Fla It sounds like you have the basis for your own answer; which I encourage you to post. This answer shows how to do the full onclick experience without additional elements, masking efforts, etc. But the method you describe would be even more complicated than this one. And regardless, I spend an entire paragraph on the caveats to my quote "the only way" at the top of the answer. | |
| Aug 26, 2019 at 8:13 | comment | added | Fla |
it can't be done with the exact same link of course, but another link with href="#" will do the trick. And the good link can be shown depending of what you need: #showme:target ~ [href="#"] { display: block; } will make the link allowing you to hide it to appear, for example.
|
|
| Aug 25, 2019 at 21:08 | comment | added | TylerH |
@Fla I mean undo, as in reset or do in reverse; return to a previous state. With :target, once you click the link to show the div, you can't unshow the div; you're stuck with it. If all you want to do is a one-time, irreversible repaint, then sure, :target will work, but if you want what onclick gives you, which is an actionable event that can go both ways an unlimited number of times, it's not enough.
|
|
| Aug 25, 2019 at 20:54 | comment | added | Fla | what do you mean by undo? See the answer just below to see how to do it | |
| Aug 23, 2019 at 17:35 | comment | added | TylerH | @Fla :target doesn't simulate an onclick event, just a focus event. You can't undo it, for example. | |
| Aug 23, 2019 at 17:34 | comment | added | Fla | Definitely not the only way, :target is way easier to use. | |
| Jul 9, 2019 at 9:25 | review | Suggested edits | |||
| Jul 9, 2019 at 10:10 | |||||
| Jan 9, 2019 at 23:05 | review | Suggested edits | |||
| Jan 10, 2019 at 7:10 | |||||
| Jan 2, 2019 at 14:41 | history | edited | TylerH | CC BY-SA 4.0 |
Updating for the new year
|
| Sep 13, 2018 at 15:49 | comment | added | TylerH | @ddelrio1986 Yes, it's implicit in the description of this method as a hack that it is not recommended if JavaScript is available. | |
| Sep 13, 2018 at 14:25 | comment | added | ddelrio1986 | I wouldn't advise an implementation like this for accessibility reasons. I guess you could get around most of the accessibility problems with this using aria but aria should be a last resort. You should instead use HTML elements when their semantics fit the use-case. | |
| Jun 10, 2018 at 3:32 | comment | added | TylerH |
@MuhammadSaqib Yes, it should work on any mobile browser that supports :checked.
|
|
| Jun 1, 2018 at 17:45 | history | bounty awarded | CommunityBot | ||
| Jun 1, 2018 at 13:47 | comment | added | TylerH | @HerrSerker That works if you want that behavior, though typically for buttons that change on click you would not want to click off of the button to unselect it; a toggle on the same element is usually desired. | |
| Jun 1, 2018 at 8:53 | comment | added | yunzen | The 'unclick' could be made with the use of radio-buttons and fullscreen label invsible label to 'unclick': See codepen.io/HerrSerker/pen/qKdwOr | |
| Jan 1, 2018 at 0:42 | history | edited | TylerH | CC BY-SA 3.0 |
Updated for a new year
|
| S Dec 28, 2017 at 20:33 | history | suggested | Greg K | CC BY-SA 3.0 |
Fixed placekitten url
|
| Dec 28, 2017 at 20:32 | review | Suggested edits | |||
| S Dec 28, 2017 at 20:33 | |||||
| May 23, 2017 at 11:55 | history | edited | URL Rewriter Bot |
replaced http://stackoverflow.com/ with https://stackoverflow.com/
|
|
| Apr 24, 2017 at 23:10 | comment | added | Jack G | Just use the CSS to listen for when HTML is clicked, and then reset everything. That ought to work. | |
| Apr 20, 2017 at 15:24 | comment | added | TylerH | @mxmehl If you want them to click in a specific spot, you could do it with another adjacent sibling element, probably. However, if you want it to revert just by clicking anywhere on the screen that is blank, you're probably going to need JavaScript event listeners. Remember, this is a hack and is not the "best" way to create an "interactive" experience; that's what JS is for. This is just how to do it if you're restricted to using only CSS. :-) | |
| Apr 19, 2017 at 21:45 | comment | added | mxmehl | Awesome! But is there a way to revert the changes also when clicking somewhere else than on the input/image/button? I used your example to create a popup field and I want it to disappear when visitors click on the blank page. Thanks! | |
| Jan 11, 2017 at 15:46 | history | edited | TylerH | CC BY-SA 3.0 |
edited body
|
| Dec 21, 2016 at 22:16 | history | edited | TylerH | CC BY-SA 3.0 |
added 15 characters in body
|
| Dec 2, 2016 at 16:35 | history | edited | TylerH | CC BY-SA 3.0 |
added 108 characters in body
|
| Nov 2, 2016 at 20:49 | history | edited | TylerH | CC BY-SA 3.0 |
added 63 characters in body
|
| Sep 23, 2016 at 15:16 | history | edited | TylerH | CC BY-SA 3.0 |
added 55 characters in body
|
| Aug 31, 2016 at 15:28 | history | edited | TylerH | CC BY-SA 3.0 |
Moved the footnote to the bottom of the prose section so that the bottom section can be entirely examples.
|
| Aug 12, 2016 at 17:59 | history | edited | TylerH | CC BY-SA 3.0 |
added 2 characters in body
|
| Jul 12, 2016 at 17:54 | history | edited | TylerH | CC BY-SA 3.0 |
Moved browser support info higher up.
|
| Jul 5, 2016 at 13:06 | history | edited | TylerH | CC BY-SA 3.0 |
added 59 characters in body
|
| May 26, 2016 at 18:36 | history | edited | TylerH | CC BY-SA 3.0 |
added 5 characters in body
|
| May 1, 2016 at 22:47 | history | edited | TylerH | CC BY-SA 3.0 |
Updated the button styles to look more like a button
|
| Apr 13, 2016 at 15:49 | history | edited | TylerH | CC BY-SA 3.0 |
added 3 characters in body
|
| Apr 5, 2016 at 13:09 | history | edited | TylerH | CC BY-SA 3.0 |
added 128 characters in body
|
| Mar 22, 2016 at 2:20 | history | edited | TylerH | CC BY-SA 3.0 |
added 344 characters in body
|
| Jan 12, 2016 at 17:12 | history | edited | TylerH | CC BY-SA 3.0 |
edited body
|
| Oct 25, 2015 at 20:30 | history | edited | TylerH | CC BY-SA 3.0 |
added 1 character in body
|
| Sep 22, 2015 at 18:19 | history | edited | TylerH | CC BY-SA 3.0 |
added 33 characters in body
|
| Sep 22, 2015 at 17:54 | history | edited | TylerH | CC BY-SA 3.0 |
Added image resize demo per the comment by OP on Nullpointer's answer.
|
| Sep 22, 2015 at 16:08 | history | edited | BoltClock | CC BY-SA 3.0 |
added 8 characters in body
|
| Sep 22, 2015 at 16:01 | history | answered | TylerH | CC BY-SA 3.0 |