CSS onclick

CSS
#cssonclickswitch {
position:relative;
width: 150px;
margin:20px auto 100px;
}
#cssonclickswitch li {
width:50px;
}
#cssonclickswitch a {
display: block;
width:50px;
color: #000;
text-decoration:none;
text-align:center;
}
#cssonclickswitch a img {
border:0;
}
#cssonclickswitch a:hover,
#cssonclickswitch a:focus:hover {
color: #cff;
background:black;
}
#cssonclickswitch a:active,
#cssonclickswitch a:focus {
color:#fff;
background-color:red;
}
#cssonclickswitch a span {display: none;}
#cssonclickswitch a:active span,
#cssonclickswitch a:focus span {
display: block;
position: absolute;
top: 0;
left: 170px;
width: 50px;
color:red;
background:#fff;
}
HTML
<h1>CSS onclick</h1>
<ul id="cssonclickswitch" class="cfix">
<li><a href="#n">Wine<span><img src="wine.jpg" alt="wine" height="50" width="50"></span></a></li>
<li><a href="#n">Beer<span><img src="beer3.jpg" alt="beer" height="50" width="50"></span></a></li>
<li><a href="#n">Whisky<span><img src="whisky.jpg" alt="whisky" height="50" width="50"></span></a></li>
</ul>

Comments

#1
2006-08-24 Samantha says :

Great tutorial! Is it possible to have the active nav selection indicated? (for example, the word "wine" is a different color when the wine picture is displayed?)
Thanks!

#2
2006-08-24 BonRouge says :

Samantha,
I just added these lines:#cssonclickswitch a:active,
#cssonclickswitch a:focus {
color:#fff;
background-color:red;
}

#3
2006-08-24 Samantha says :

Perfect, that is exactly what i wanted! I have one more question, and this will be the last, I swear! How do I make the first image show up when the page loads - and have the images not dissappear when you click on them? (For ex. if you click on the wine pic, it becomes a blank space again). Thank you so much for taking the time to help me.

#4
2006-08-25 BonRouge says :

That's the drawback of using CSS for this kind of thing. I think you should probably use javascript for what you want to do. There's an example here.

#5
2006-10-03 Jollymon says :

What are the style attributes of the class: cfix that you make reference to in the UL tag?

#6
2006-10-04 BonRouge says :

The .cfix class on this page looks like this:.cfix:after {
content: ".";
display: block;
height: 0;
overflow:hidden;
clear: both;
visibility: hidden;
}

/* Hides from IE Mac \*/
* html .cfix {height: 1%;}
.cfix{display:block;}
/* End Hack */

It comes from CSS Creator and is used to contain the floats. I've actually never seen any problem when I've used only this:.cfix:after {
content: " ";
display: block;
clear: both;
overflow:hidden;
}

#7
2006-12-22 Harrie says :

Nice tutorial, I've bookmarked your site for further reference, thx.

This is almost exactly what I want for a page I'm currently writing, but I would like to toggle a condition with an "onclick" event. Something like:

display pic of beer when beer is clicked
remove pic of beer when beer is clicked again
display pic of beer when beer is clicked
enz ..

Is this posible? I'm starting to believe it's not ..

#8
2006-12-22 BonRouge says :

Did you see this page?

#9
2006-12-26 Harrie says :

Not before, no, but I just checked it out, thx.

Sorry, I forgot to mention that I want a HTML/CSS only solution. Can some HTML element (or XML element) be toggled with CSS only?

#10
2006-12-27 BonRouge says :

Harrie,
An 'onclick' event is javascript. I think what you're asking for is not currently possible with CSS alone.

#11
2006-12-28 Harrie says :

Thanks for your feedback, BonRouge, I appreciate it.

Yes, I know "onclick" is a (java)script event, but your "cssonclickswitch" was so close to it (for what I want), that I hoped that it could be done through CSS.

Do you know if CSS level 3 will support something like what I want? I mean, (as an example) HTML's "onmouseover" (script event) is so close to CSS's dynamic pseudo-class ":hover" that it should, at least theoretical, be possible.

I haven't read the CSS level 3 Specification yet, it's not a recommendation yet, I'll do that in the coming days. If I find something I like, I'll leave the URL to it here, ok?

#12
2006-12-29 BonRouge says :

Harrie,
No, this isn't in the CSS3 specs. There is no harm in reading them if you have some free time.
I think the closet thing we have is ':target'

#13
2007-01-14 Kolt says :

Is there a possibilty to do this together with an <map><area shape="rect" coords="361,526,684,555" href="#n" alt="" /></map> ? can't find it..

#14
2007-01-15 BonRouge says :

Kolt,
No, I don't know how you would do that.

#15
2007-01-19 Kolt says :

Thnx anyway.. ;)

#16
2007-01-30 Harrie says :

I've read about the :target selector (your example and the W3C's CSS3 selector page), it looks interesting, I'll do some experiments with the code I have, thank you very much.

The "free time" is currently a bit limited, so I'll leave reading the complete CSS3 selectors to my ToDo list, but I'm a bit puzzled by the "TR" in the URL, while the page says it's (still) a Working Draft. I thought Working Drafts did contain the string "WD" in the URL?

#17
2007-02-04 MC says :

I wonder why when once clicked (turns red) hover doesn't work anymore ?

#18
2007-02-04 BonRouge says :

MC,
I've just added this:#cssonclickswitch a:focus:hover {
color: #cff;
background:black;
}

That fixes it in Firefox. It doesn't fix it in IE (at least not IE6).
I've also just checked this page in Opera and found that the :focus thing doesn't work there. The :active bit works OK - so you can see the image while you hold the mouse button down - but the image disappears when you let go.

The more I think about it, the more I think javascript should be used for this kind of thing.

#19
2007-02-28 Hal says :

Javascript would be the easy solution, however this is a nice method to use for css when js isn't available. I tried adding this in for a myspace page and it works nicely in IE7, but not firefox or IE6. I think I can make it work in IE6, but firefox is probably a lost cause.

#20
2007-02-28 BonRouge says :

Hal,
It's funny you should say that, because I've found that this works better in Firefox than in IE...

#21
2007-02-28 Fresh says :

How would you add a sound to the onClick event?

#22
2007-02-28 BonRouge says :

Fresh,
I wouldn't.

#23
2007-02-28 Fresh says :

I am curious if CSS supports the use of sound files or if sound is limited to options like JS and Flash for something like this?

#24
2007-03-01 BonRouge says :

Fresh,
You can't add sound with CSS.

#25
2007-03-01 Hal says :

The above script worked in Firefox, but the changes I made only worked in IE7, one anchor tag within another anchor tag is what I think didn't let it work. And since myspace isn't up to css standards, I can only hover on the anchors. My myspace username is gamertagpics if you wanna check out the above css in action, IE7 ONLY though.

#26
2007-11-16 Josh says :

this is great.. very useful.. is there a way to turn the dotted border off that apears when the onclickswitch is used? thanks

#27
2007-11-16 BonRouge says :

Josh...a:focus {
outline:0;
}

#28
2008-01-19 Matthew says :

can I use this feature, so that another frame links to a page as well. Like, have this css affect, but with also a frame (eg target="mainFrame") linking to another page.
thanks! Great css!

#29
2008-04-04 Dave says :

Thats great, but allmost usefull in my case.
Is it possible that the active button (red beakcground/white text) can stay active untill you press a different button?
Because now, when you click somewhere on the page, the active status will set it selfs back to the default setting. I would like to have it stay active till you only click on a different button.
I'm searchin for some kind of behaviour, because i use a page with links to different video files. These video files are called in a lightbox effect/behaviour. But the a:focus will turn off again when the lightbox overlay is loaded. I would like to see, when people click on a video link, that the button turns active and stay active untill they choose a different video to watch.

Some story huh? haha
Well, i can't find something that suits my needs and your tuts are really coming close to what i need.

Hope to hear soon.

Best regards,
Dave.

#30
2008-04-21 Aaron says :

BonRouge,

Thank you. I can't explain why I want to use CSS for this rather than JS. And that alone might indicate how little I know. I do appreciate this so much.

I changed the menu to horizontal and I use text rather than images. It works out awesome.

I have a few questions:

In IE6, when I click an item, *sometimes* the <span> contents don't display until I move my mouse from hover. And, *sometimes* the contents display at the click. Do you know why this happens? Is that an IE problem I'll have to deal with?

#31
2008-04-22 BonRouge says :

Aaron,
That would be because IE6 is crap. smile

#32
2008-05-05 chris says :

what about safari for windows? why does this not work? (the image only becomes visible when the button is depressed, and disappears when released) should i care? i guess i just thought since it's supposed to be so standards compliant and all....

#33
2008-05-05 BonRouge says :

chris,
Why would anyone use Safari for Windows?
Seriously though, as I've said a few times above, this code is not reliable across many browsers, so you'd better using javascript for this effect.
I hope that helps.

#34
2008-05-11 Arcosinus says :

Don't use Javascript, use instead PHP, this is the only sollution!bye

#35
2008-05-11 Candace says :

I don't see why having an "original" or starting image is a problem with this script. If you simply put a picture in the place where the images will appear they overlap the original... until the visitor clicks again outside the links. Or if you can use absolute positioning... possibly use the starter image as a background.

#36
2008-10-02 elina says :

Hey, this is exactly what need and I copied it, it just doesn't work. Why? I have written the exact code as you have written it above?

#37
2008-10-02 BonRouge says :

elina,
Can you show me your page?

#38
2008-11-06 Gaetor says :

Beautiful CSS and a good & productive discussion ... hope we can continue to tweak it.

#39
2009-01-04 Chris says :

I need to have a image appear in a div column when I click a image in another div column on the same page. Similar to whats done here only a specific column is targeted, using only css. Thanks in apreciation.

#40
2009-01-05 BonRouge says :

Chris,
As that CSS is using absolute positioning for the image, you can have it appear anywhere you like by just changing the left and top values.
I hope that helps.

#41
2009-02-21 Andre says :

Who needs Javascript? CSS FTW!!
Amazingly simple, great tutorial.
It seems to be flawless on FF3 & IE6, are you aware of any browser issues?

#42
2009-03-04 Jason says :

I Love this, actually it has helped me understand spans a little bit better. I had no problem getting it to work for a webpage, but if i try to get it to work on myspace it only shows the text and pic it doesn't wait for the text to be clicked.
I'm not sure if you would know whats causing the problem but it cant hurt to ask.

Thank you in advance..

#43
2009-04-12 razzel says :

Hi,
Very interesting! I am trying to the same thing with a ul list: you click on the list header and the list shows itself beneath. A problem though: when I release the mouse button the list closes. Any tip how to make it stay?

#44
2009-04-13 Ajay says :

HI,
I need all ur CSS as inline.Is it possible??
Very urgent

#45
2009-04-13 BonRouge says :

razzel,
I guess I'd have to see the problem to comment on it.

Ajay,
No, that's not going to happen - especially not if it's 'very urgent'. Sorry.

#46
2009-04-13 razzel says :

Of course! Here it is:

<style type="text/css">
li ul {
display: none;
}
li:active > ul {
display: block;
}

</style>



<ul>

<li><a href="#">Klicka här</a>
<ul>
<li><a href="#">TEST 1</a></li>
<li><a href="#">TEST 2</a></li>
<li><a href="#">TEST 3</a></li>
</ul>
</li>

</ul>

#47
2009-04-13 razzel says :

Opps... sorry about the Swedish "Klicka här" means "Click here".

#48
2009-07-06 Halag says :

BonRouge,perfect!
that is almost exactly what i wanted! Is it possible to have further links from images?

#49
2009-09-25 Bryan says :

This is exactly what I was looking for. Do you know why this isnt working right in Safari or Google Chrome? When I click the clicks the beers show up, but they dont stay put. As soon as you release the mouse button the beer disappears.

#50
2009-09-29 Cuong says :

Hello BonRouge!

I love your tutorial although I have a question. Based on your code...after you click a button and it is highlighted, is there a way to keep the focus on that button although you click somewhere else on the screen?

#51
2009-09-29 Cuong says :

Sorry forgot to mention that I did not want to hide and show DIVs but I am clicking on a hyperlink and it is opening to a targeted DIV.

#52
2009-11-20 Andy G. says :

First I want to thank you for this four-liner:
#cssonclickswitch a:active,
#cssonclickswitch a:focus {
color:#fff;
background-color:red;
}

That was exactly what I was trying to do for some time now. So you made my day! I'm still trying to improve it tho, perhaps you can help me.

The links that use this code for are in one div. Now is it possible that you can work on a second div and that in the maintime, the last clicked item keeps its color?

The purpose is the following. I wrote a kind of repository Explorer for Alfresco that can be displayed through html and css so it runs on any kind of computer. You have one navigation-div and one folder-content-div. This four-liner is used when you click on a folder in navigation-div so you see what you just clicked. But when you then open a file in the content-div, the color is being reset again in the navigation div, unfortunately.

Thanks anyway

#53
2010-03-08 Lee says :

Is there a way to keep the item selected when user click elsewhere on a page? Currently, it just un-highlight.

Thanks

#54
2010-07-15 Bob says :

Thanks for this, it was just what I was looking for.

Has anyone found a way to make it work in safari and chrome yet?

thanks again

#55
2010-08-19 omid reza says :

thanks
it is very good

#56
2010-08-28 PHOEBEConway27 says :

The <a href="http://bestfinance-blog.com">loan</a> suppose to be useful for people, which would like to ground their career. In fact, that's very comfortable to receive a credit loan.

#57
2010-09-07 feree says :

thanks alot dear BonRouge,your code worked.

#58
2010-10-13 Dragon says :

This is fantastic! I just need the menu to stay visible until clicked again. Is that possible with JUST CSS3 (using FF best 4.7 only which supports CSS3. Other browsers are not a concern)?

Thanks again for the code.

#59
2010-11-13 abid omar says :

i want to know that exactly how you do the click on the menu
please write the statement

#60
2010-11-22 murtada hassan says :

thank u very much

#61
2010-12-12 Anon says :

How did call onclick function?

#62
2011-03-07 Grey_Man says :

Thanks very much, great tutorial. Have a similar post on my blog As I Learn

#63
2011-03-23 Claudiu says :

Awesome dude! Works like a charm! Thanks a lot!

#64
2011-05-24 Boon says :

Great code there, as a lot of people have said it is pretty much exactly what I wanted!

However it is a little annoying that it doesn't work in chrome (the pictures and red background only display whilst the mouse button is depressed and disappear on release) any word on why this is or ideas to fix it?

#65
2011-06-16 srishida says :

I am trying to make a horizontal navigation bar for a webpage,which has drop-down sub-menu bar. The dropdown should be displayed only on clicking the elements in the navigation bar,and should remain displaying the dropdown until I click on an element from the dropdown. Also the element in the horizontal navigation bar should not land me to any page on clicking instead should display the dropdown. How can I achieve this using CSS, Please help!!!!

#66
2011-07-03 Mohammad says :

hi,your CSS was so useful for me thanks , but i have a question ,Dave ask it before but you did not answer ,
you click link it worked but after that when click other part of page link change to first type ! how can it stay like when click link ?

#67
2011-07-03 BonRouge says :

Mohammed,
I've tried to say a few times on this page that this is not a good way to do this. I put it here because I thought it was interesting and it showed how CSS could replace javascript in some situations. It seems that as this code does not work reliably, it's actually not very good.
Please have a look at this javascript solution, or elsewhere, for a better answer.

#68
2011-07-24 Sabir says :

Hi, I have tried to combine this with another content switcher I am using, but I just can't get the Title to change colour once it's been selected, the way your titles turn red?!?! For some reason it only turns red for a split second on clicking - any ideas? Please help

#69
2011-08-03 xinfurinfula says :

thanks!

#70
2011-12-08 djeddy says :

simple pero util

#71
2011-12-08 djeddy says :

very happy viva nicaragua!

#72
2012-05-25 alex says :

many thank uuuuuuuu´s !! great info,nice having shared

#73
2012-07-31 someone says :

this did not really help me i want to make some sort of movement when you click on a picture or something.

#74
2012-09-04 john says :

working beautifully. thank you!

#75
2012-11-28 Josh says :

I have a very similar request to the above mentioned and your tips have been really great for some other things I've been working on. However, I have a specific need for an onclick command that already has css3 action. I have a div that has content plus an iframe in it. It expands down from 50px to 150px height when hovered using -webkit-transition. What I need is to also make it so that when you click anywhere on the div, it will stay in the expanded state until I click it again to retract it. Specifically so that touchscreen users can see the entire div too. Have any ideas that could make that happen with what I'm already doing? I can provide the code if you need to see it.

#76
2012-11-28 Josh says :

I have a very similar request to the above mentioned and your tips have been really great for some other things I've been working on. However, I have a specific need for an onclick command that already has css3 action. I have a div that has content plus an iframe in it. It expands down from 50px to 150px height when hovered using -webkit-transition. What I need is to also make it so that when you click anywhere on the div, it will stay in the expanded state until I click it again to retract it. Specifically so that touchscreen users can see the entire div too. Have any ideas that could make that happen with what I'm already doing? I can provide the code if you need to see it.

#77
2012-11-28 josh says :

Oops. the comment page kicked back errors and loaded my comment twice. heh. php code check!

#78
2013-03-19 EJ says :

Hi guys,

chrome/safari handle :focus differently, there is a solution for it, just add in the <c><a tabindex="1"></c> to show element and <b>tabindex="2"</b> for the hide elements.

BonRogue thanks for sharing!

#79
2013-04-30 Chelsea says :

EJ, please elaborate. Where exactly do you put this code?

#80
2013-06-04 Bachi says :

Thanks for the tutorial AND especially also for the tipp in Comment #78 for Chrome and Safari smile I invested several hours with this problem befor i found this solution!

Comment form

Please type the word 'wife' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url