css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image


  1. Cool one.

    Just a word about the main tag : Browsers don't know it well yet ; so in Firefox and Webkit based browsers, as an unknown tag is block type, there's no problem, but it's no good for IE ; so just add main { display: block } and you're good with it.

  2. Whats the thinking behind it working without a text label on mobile but then needing one on desktop? maybe if it works on mobile without a label you don't need one on desktop? I think this has to rely on the iconography anyway, icon tabs are cool though :)

  3. @mrbizle There is no thinking behind, I just coded it because of fun. :)

  4. I was sold at "Bacon ipsum"!

  5. I'm trying this on our dev site. It's the first time I've used tabs in a responsive site and this is excellent code for the job. But I have serious misgivings about how well tabbed content will communicate on the small screen. Bear with me this is a philosophical discussion.

    The use of icons in the example allows the tabs to remain on one line. Let's be reasonable: We will seldom have titles in the tab that will remain on one line on a pad or mobile. We will also seldom have an icon to match the title. In most cases we must make short titles, and style the tabs so they stack and users still know they are tabs on the small screen.

    My other issue is that when a user reads content from one tab—let’s say the first one—and has scrolled to finish it, how does he know to go to the next tab or what is there to entice him to scroll back to the tabs? Should we add tabs at the bottom as well? That seems like bad UX to me.

  6. @Robot I've made this pen just for fun and would not recommend using tabs on mobile.

  7. The tabs are not keyboard-accessible. You must not hide the radio buttons per display: none (nor visibility: hidden), but visually hide them: opacity: 0 etc. See fork http://codepen.io/gunnarbittersmann/pen/adKezJ

  8. I found that this was awesome, but it wouldn't work on iphone or android.

    Here is a quick hack:

        // fix for smartphone
        body {
            -webkit-animation: bugfix infinite 1s;
        @-webkit-keyframes bugfix {
            from {
                padding: 0;
            to {
                padding: 0;
  9. Hi guys, just a simple question from me ? is it possible to remove the icon from the tab menu ?

  10. Hi! Awesome pen i have to say! @oknoblich But how do i do i make a link of the text? Have tried alot of solutions but nothing seems to work.

  11. Hi, Really like your approach for CCS Tabs. I am however battling to add anchors. I want to click on a button which then open the Dropbox tab. <a href="#regions"></a> Any advise, please.

  12. Great, interesting, and again great approach!

  13. Enjoyed every bit of code and details Enjoyed everything!

  14. Hi I have been using this excellent css tabs on my site but i got a question:

    How do i use this tabs system multiple times on the same page where i don't know how many tabs there are because the amount of tabs are dynamically made?

    I think it will work but this piece of your code is the problem?

    tab1:checked ~ #content1,

    tab2:checked ~ #content2,

    tab3:checked ~ #content3,

    tab4:checked ~ #content4 {

    display: block; }

    thanks ed

  15. Hello, forgive me but on Chrome it does not work. How can I solve? Thanks so much

  16. nice work it's amazing

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.