Mobile Friendly Website


Doing it with style

CSS radio tabbed pages COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}

Post a comment

Current posts

I don't know if this is limited to Firefox, but when you use display:none the labels can't be selected by keyboard. On the other hand, if you use position:absolute and some extreme coordinates to remove them from the viewport you can use the arrow keys to navigate between the tabs.
(27.06.2012, 07:40)

I would use the method that is on my concertina menu:
This has display:none; for the close label which is changed to display:block when a tab is selected.
(27.06.2012, 08:10)

accesskey and left/right key support added.
(27.06.2012, 09:30)

how can i change this to mouseover?
(18.08.2014, 22:48)

You can't.
This works using radio 'checked' which requires a mouse click.
(19.08.2014, 08:02)

John Williamson:-
Hi Stu, your tutorials have been a God send to me over the years and i have learned os much from you. As I move forward in web design, I am constantly hobbled by older browsers not displaying something right, most notably IE9 and below. I am having a dickens of a time getting this menu :cssplay-radio-tabs.html to display in IE9. Do you have any suggestions? Thanks so much,

John Williamson
(01.06.2015, 18:04)

This demo works in IE9 so you need to check that you have copied the correct code and stylesheet. I do offer a service to fault find but would need to quote for this.
(01.06.2015, 18:50)

Hi Stu,

I want to put multiple instances on the same page. You mention on the demo page that this only requires small changes to the CSS, but I can't figure out what changes will do the trick. Could you explain? Many thanks.
(25.06.2015, 02:22)

Just continue on with the input tab id numbering and view numbering in the code and add the :checked ~ view for each in the stylesheet.
(25.06.2015, 08:34)

Hi Stu, thanks for the instructions. I did the input tab id & view numbering and added the :checked ~ views. STILL could not get two tab panels to work on the same page. Finally I put each one between form tags, and that (in combination with your numbering instructions) seems to have done the trick! They work great.
(26.06.2015, 04:09)


Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'


Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


Facebook Twitter rss feed Facebook Fan Page