How to keep the background color persistent in css active?

Question

I have a image, when user clicks on it I am changing the background color of it. for ex:

HTML:

<img src="images/image1.png" />

CSS:

img:active{
    background-color:red;
}

But the red color is not persistent. and the red color is replaced with the old color. How can I make it persistent ?

Answer 1

OnClick functionality isn't achievable solely through CSS. You will need to use javascript to achieve this.

Answer 2

Just use jQuery:

$('img').click(function(){
  $(this).addClass('red');
});

then in css make sure you have something like this:

img.red {
  background-color:red;
}

Answer 3

As others pointed out, you should use javascript with onclick event handler, save the clicked element's state and toggle at right time... However I would like to introduce this work-around without using any script, it uses some focusable wrapper (like a button ) to mimic other unfocusable element (like the image ) and use the :focus pseudo-class to style the active element (as you understand, it can be in such a state by clicking or tabbing):

HTML :

<button class="wrapper">
  <img/>
</button>    

CSS :

.wrapper > img {
   background-color:inherit;
   width:200px;
   height:200px;        
}
.wrapper {
   border:none;
   padding:0;
   cursor:default;
}
.wrapper:focus {
   background-color:red;
   outline:none;
}

Here is the working fiddle , try clicking the image and then clicking on some point outside to see it in action.