Revisions to Can I have an onclick effect in CSS?

Updating link to use Picsum which should be a little more reliable than random cat picture generators.

Source Link

edited Nov 15, 2024 at 16:33

21.3k
84
84
121

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="https://placecatspicsum.comphotos/200/300" id="btnLeft" /></label>

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="https://placecats.com/200/300" id="btnLeft" /></label>

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="https://picsum.photos/200/300" id="btnLeft" /></label>

Fix broken URL

Source Link

edit approved Nov 15, 2024 at 16:33

Laurent FAVOLE

423
1
6
16

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="https://placekittenplacecats.com/200/300" id="btnLeft" /></label>

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="https://placekitten.com/200/300" id="btnLeft" /></label>

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="https://placecats.com/200/300" id="btnLeft" /></label>

Fixing broken URL

Source Link

edited May 10, 2024 at 13:52

TylerH

21.3k
84
84
121

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="https://placekitten.com/200/140"300" id="btnLeft" /></label>

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="https://placekitten.com/200/140" id="btnLeft" /></label>

#btnControl {
    display: none;
}

#btnControl:checked + label > img {
    width: 70px;
    height: 74px;
}

<input type="checkbox" id="btnControl"/>
<label class="btn" for="btnControl"><img src="https://placekitten.com/200/300" id="btnLeft" /></label>

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.

Source Link

edited Jul 18, 2022 at 13:38

TylerH

21.3k
84
84
121

Loading

Firefox unfortunately regressed and removed support for -moz-outline-radius in v88 through v91, so I'm removing it from the answer.

Source Link

edited Jul 26, 2021 at 17:41

TylerH

21.3k
84
84
121

Loading

http -> https

Source Link

edited Jun 30, 2020 at 14:16

TylerH

21.3k
84
84
121

Loading

Commonmark migration

Source Link

edited Jun 20, 2020 at 9:12

Community Bot

1
1

Loading

Updating for the new year

Source Link

edited Jan 2, 2019 at 14:41

TylerH

21.3k
84
84
121

Loading

Bounty Awarded with 500 reputation awarded by CommunityBot

occurred Jun 1, 2018 at 17:45

Updated for a new year

Source Link

edited Jan 1, 2018 at 0:42

TylerH

21.3k
84
84
121

Loading

Fixed placekitten url

Source Link

edit approved Dec 28, 2017 at 20:33

Greg K

2k
1
18
33

Loading

replaced http://stackoverflow.com/ with https://stackoverflow.com/

Source Link

edited May 23, 2017 at 11:55

URL Rewriter Bot

Loading

edited body

Source Link

edited Jan 11, 2017 at 15:46

TylerH

21.3k
84
84
121

Loading

added 15 characters in body

Source Link

edited Dec 21, 2016 at 22:16

TylerH

21.3k
84
84
121

Loading

added 108 characters in body

Source Link

edited Dec 2, 2016 at 16:35

TylerH

21.3k
84
84
121

Loading

added 63 characters in body

Source Link

edited Nov 2, 2016 at 20:49

TylerH

21.3k
84
84
121

Loading

added 55 characters in body

Source Link

edited Sep 23, 2016 at 15:16

TylerH

21.3k
84
84
121

Loading

Moved the footnote to the bottom of the prose section so that the bottom section can be entirely examples.

Source Link

edited Aug 31, 2016 at 15:28

TylerH

21.3k
84
84
121

Loading

added 2 characters in body

Source Link

edited Aug 12, 2016 at 17:59

TylerH

21.3k
84
84
121

Loading

Moved browser support info higher up.

Source Link

edited Jul 12, 2016 at 17:54

TylerH

21.3k
84
84
121

Loading

added 59 characters in body

Source Link

edited Jul 5, 2016 at 13:06

TylerH

21.3k
84
84
121

Loading

added 5 characters in body

Source Link

edited May 26, 2016 at 18:36

TylerH

21.3k
84
84
121

Loading

Updated the button styles to look more like a button

Source Link

edited May 1, 2016 at 22:47

TylerH

21.3k
84
84
121

Loading

added 3 characters in body

Source Link

edited Apr 13, 2016 at 15:49

TylerH

21.3k
84
84
121

Loading

added 128 characters in body

Source Link

edited Apr 5, 2016 at 13:09

TylerH

21.3k
84
84
121

Loading

Collectives™ on Stack Overflow

Return to Answer