Alegro Alegro - 6 months ago 17
CSS Question

Can I have an onclick effect in CSS?

I have an image element that I want to change on click.

<img id="btnLeft">


This works:

#btnLeft:hover {
width:70px;
height:74px;
}


But what I need is:

#btnLeft:onclick {
width:70px;
height:74px;
}


But, it doesn't work, obviously. Is it possible at all to have
onclick
behavior in CSS (i.e. without using JavaScript)?

Answer

The closest you'll get is :active:

#btnLeft:active {
    width: 70px;
    height: 74px;
}

However this will only apply the style when the mouse button is held down. The only way to apply a style and keep it applied onclick is to use a bit of JavaScript.