htmlcssonclick

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)?

Solution

  • 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.