What is the correct way to implement CSS Radio Checked to change styling of tabs

Question

I am creating a css tabbed content area for a web page.

I have already created the tab mechanism for changing the content using radio buttons.

I am unsure of how to propperly reference a checked radio button and to use this to activate css style the same way a :hover would.

Please see my JSFiddle, I have included a link of what i hope for it to eventually look like as well as a link to a zip for you to run it locally if you prefer - this is all in the JS section as Im not using JS.

http://jsfiddle.net/AirCombat/eBUWL/

Thank you in advance for any help! I've been scratching my head over this for a while.

CSS:

    /* My CSS */
/* Global */ 
*   {
    font-family: 'Open Sans', "Helvetica Neue", helvetica, arial, sans-serif;
}
a   {
    text-decoration: none;
} 

 /* Classes */
 .clear {
    clear: both;
}

/* Pages */

/* Product Tabs */

.tabs {
    width: 750px;
}

.productTabs input {
    position: absolute;
    width: 120px;
    height: 40px;

    z-index: 1000;
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}


.productTabs label {
    position: relative;
    left: 40px;
    float: left;
    width: 132px;
    height: 150px;
    display: block;
    margin: 0 5px 0 0;
    color: black;
}

.productTabLabel1 {
    z-index: 6;
    background-image: url('http://example.com/jsfiddle/img/tab1.jpg');
}

.productTabLabel1:hover {
    z-index: 6;
    background-image: url('http://example.com/jsfiddle/img/tab1selected.jpg');
}

.productTabLabel2 {
    z-index: 5;
    background-image: url('http://example.com/jsfiddle/img/tab2.jpg');
}

.productTabLabel2:hover {
    z-index: 5;
    background-image: url('http://example.com/jsfiddle/img/tab2selected.jpg');
}

.productTabLabel3 {
    z-index: 4;
    background-image: url('http://example.com/jsfiddle/img/tab3.jpg');
}

.productTabLabel3:hover {
    z-index: 4;
    background-image: url('http://example.com/jsfiddle/img/tab3selected.jpg');
}

.productTabLabel4 {
    z-index: 3;
    background-image: url('http://example.com/jsfiddle/img/tab4.jpg');
}

.productTabLabel4:hover{
    z-index: 3;
    background-image: url('http://example.com/jsfiddle/img/tab4selected.jpg');
}

.productTabLabel5 {
    z-index: 2;
    background-image: url('http://example.com/jsfiddle/img/tab5.jpg');
}

.productTabLabel5:hover {
    z-index: 2;
    background-image: url('http://example.com/jsfiddle/img/tab5selected.jpg');
}

.productTabLabel6 {
    z-index: 1;
    background-image: url('http://example.com/jsfiddle/img/tab6.jpg');
}

.productTabLabel6:hover {
    z-index: 1;
    background-image: url('http://example.com/jsfiddle/img/tab6selected.jpg');
}

 .clear {
    clear: both;
}

.tabContent {
    background: #ddd;
    position: relative;
    width: 900px;
    min-height: 100px;
    z-index: 10;
}

.tabContent div {
    position: absolute;
    top: 0;
    left: 0;   //makes all tabs content appear in same place

    z-index: 1;
    opacity: 0;  //Makes content invisivble when not selected

    -webkit-transition: opacity linear 0.1s;
    -moz-transition: opacity linear 0.1s;
    -o-transition: opacity linear 0.1s;
    -ms-transition: opacity linear 0.1s;
    transition: opacity linear 0.1s;
}

.productTabs input.productTabRadio1:checked ~ .tabContent .tabContent1,
.productTabs input.productTabRadio2:checked ~ .tabContent .tabContent2,
.productTabs input.productTabRadio3:checked ~ .tabContent .tabContent3,
.productTabs input.productTabRadio4:checked ~ .tabContent .tabContent4,
.productTabs input.productTabRadio5:checked ~ .tabContent .tabContent5,
.productTabs input.productTabRadio6:checked ~ .tabContent .tabContent6{
    z-index: 100;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;

    -webkit-transition: opacity ease-out 0.2s 0.1s;
    -moz-transition: opacity ease-out 0.2s 0.1s;
    -o-transition: opacity ease-out 0.2s 0.1s;
    -ms-transition: opacity ease-out 0.2s 0.1s;
    transition: opacity ease-out 0.2s 0.1s;
}

My HTML:

<body>
<!-- Tabs -->
            <div class="content">               
                <div class="productTabs">
<!-- Tabs Label / Buttons -->
                    <input id="productTab1" type="radio" name="radio-set" class="productTabRadio1" checked="checked" />
                    <label for="productTab1" class="productTabLabel1"></label>

                    <input id="productTab2" type="radio" name="radio-set" class="productTabRadio2" />
                    <label for="productTab2" class="productTabLabel2"></label>

                    <input id="productTab3" type="radio" name="radio-set" class="productTabRadio3" />
                    <label for="productTab3" class="productTabLabel3"></label>

                    <input id="productTab4" type="radio" name="radio-set" class="productTabRadio4" />
                    <label for="productTab4" class="productTabLabel4"></label>

                    <input id="productTab5" type="radio" name="radio-set" class="productTabRadio5" />
                    <label for="productTab5" class="productTabLabel5"></label>

                    <input id="productTab6" type="radio" name="radio-set" class="productTabRadio6" />
                    <label for="productTab6" class="productTabLabel6"></label>

                    <div class="clear">&nbsp;</div>
<!-- Tabs Content -->
                    <div class="tabContent">
                        <div class="tabContent1">
                            <h2>Our Products and Apps</h2>
                        </div>
                        <div class="tabContent2">
                            <h2>Sage Products</h2>
                        </div>
                        <div class="tabContent3">
                            <h2>Microsoft Products</h2>
                        </div>
                        <div class="tabContent4">
                            <h2>3rd Party Sage Addons</h2>
                        </div>
                        <div class="tabContent5">
                            <h2>Support Packages</h2>
                        </div>
                        <div class="tabContent6">
                            <h2>Cloud Products</h2>
                        </div>
                    </div>
                </div>
            </div>
</body>

Answer 1

There are a HUGE amount of potential approaches, I only outline one below.

The key tenet is that you need to use label elements to change the currently selected radio option, by using the for attribute to link to the individual radio id.

You can then use the :checked selector for the radio to toggle the tab style, as well as the tab visibility itself. However, because CSS can only traverse the DOM in a limited way, you will need to adapt your HTML to be conducive to this.

Demo Fiddle

HTML

<div id='wrapper'>
    <div>
        <input type='radio' name='content' id='tab1Content' checked='true' />
        <label for='tab1Content'>Tab 1</label>
        <div>Tab 1 content</div>
    </div>
    <div>
        <input type='radio' name='content' id='tab2Content' />
        <label for='tab2Content'>Tab 2</label>
        <div>Tab 2 content</div>
    </div>
    <div>
        <input type='radio' name='content' id='tab3Content' />
        <label for='tab3Content'>Tab 3</label>
        <div>Tab 3 content</div>
    </div>
</div>

CSS

label {
    padding: 10px 15px;
    background: #f2f2f2;
    color: #4D4D4D;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
}
#wrapper {
    position:relative;
}
#wrapper > div {
    float:left;
    margin-right:10px;
}
input[name=content] {
    display:none;
}
input[name=content]~div {
    display:none;
    overflow:hidden;
    position:absolute;
    top:40px;
    left:0;
}
input[name=content]:checked~div {
    display:block;
}
input[name=content]:checked~label {
    background:lightblue;
}