Take the 2-minute tour ×

This works:


What I need is:


But, it doesn't work.
Is it possible at all to have onclick in CSS ?

share|improve this question
:active works while the mouse is down. Depending on what you're trying to do, you may be able to make it work using the CSS4 pseudo-class :target. –  bfavaretto Nov 29 '12 at 16:31

10 Answers 10

up vote 52 down vote accepted

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.

share|improve this answer
:active doesn't work. It works only with a link. #btnLeft is an image –  Alegro Nov 29 '12 at 16:30
Just to clarify: If you want a style to be permanently applied after clicking on element, you will have to use Javascript. –  jrajav Nov 29 '12 at 16:31
No, I want to change the style during mouse button is pressed –  Alegro Nov 29 '12 at 16:32
@Alegro :active does work on images. You might be doing it wrong. Post your code. –  jrajav Nov 29 '12 at 16:33
@Kiyura, tried again and it doesn't work. Are you sure ? –  Alegro Nov 29 '12 at 16:35

Edit: Answered before OP clarified what he wanted. The following is for an onclick similar to javascripts onclick, not the :active pseudo class.

This can only be achieved with either Javascript or the Checkbox Hack

The checkbox hack essentially gets you to click on a label, that "checks" a checkbox, allowing you to style the label as you wish.

The demo

share|improve this answer
why check box hack ??? op never said he is doing this on checkbox did he? –  obi NullPoiиteя kenobi Nov 29 '12 at 16:42
+1 I like this solution for CSS Click problem. It works for me even with two labels attached to one checkbox! –  NightElfik Aug 11 '13 at 22:08
You can also include your input inside the label so you don't have to use id attributes to bind them together. –  stackular Nov 25 at 12:58

You can use pseudo class :target to mimic on click event, let me give you an example.

Here's the HTML:

<a href="#something">Show</a>
<div id="something">Bingo!</div>

And here's the CSS:

#something {
  display: none;

#something:target {
  display: block;

Here's how it looks like: http://jsfiddle.net/TYhnb/

One thing to note, this is only limited to hyperlink, so if you need to use on other than hyperlink, such as a button, you might want to hack it a little bit, such as styling a hyperlink to look like a button.

share|improve this answer
How do we reverse the action? –  Ansyori Dec 10 '13 at 4:42
@Ansyori You can use a second hyperlink to reverse the action. Once the second hyperlink is clicked, the target changes: jsfiddle.net/TYhnb/809 –  Lutsen Jul 7 at 13:24

If you give the element a tabindex then you can use the :focus pseudo class to simulate a click.


<img id="btnLeft" tabindex="0" src="http://placehold.it/250x100" />




share|improve this answer

@jamwaffles is right. Some jQuery will get you there if you want to use javascript.

$("#btnLeft").click(function() {
share|improve this answer

there isnt any onclick in css you can obly do this by :active


try jquery by this you can change style on Click()

as in comment to if it is an image than the jquery/javascript is way to do like



share|improve this answer

I agree that the closet :active if you only want to used css but i don't think that it can help your problem, you need either javascript or jquery:

Javascript you can used onlick: 

 <div id="btnLeft" onclick="btnActive()"></div>

    function btnActive(){
       $('#btnLeft').css('color', 'red');

jquery approach you can used click(); or on('click')

    $('#btnLeft').on('click', function(){

share|improve this answer

On your HTML

<button id="btnLeft" onclick="myFunction()"></button>


function myFunction() {
    // Apply your style here
share|improve this answer

Reffer to jQuery Docs .mousedown() & .mouseup()

    $('body').css("background", "black");
    $(this).mouseup(function() {
        $('body').css("background", "white");
}); ​

Demo: http://jsfiddle.net/bZezzz/Se7nR/

share|improve this answer
Not even close to what the OP asked for. –  Sparky Nov 29 '12 at 16:47
Seems to... Searching for a non-JS solution. –  bZezzz Nov 29 '12 at 16:56

There is no onclick alternative, but if it is a button you are targeting for :onclick then :active works just fine!

share|improve this answer
There's no need to add answer similiar to someone else with less background information to the topic that has been answered over half a year ago. It would be acceptable if you just happen to answer question almost the same time as someone else. –  Puuskis Jul 23 '13 at 6:39

protected by Quentin Jul 23 '13 at 6:19


Would you like to answer one of these unanswered questions instead?
