No replies
cepmarketing
cepmarketing's picture
Offline
newbie
Last seen: 7 years 32 weeks ago
Timezone: GMT-6
Joined: 2013-04-17
Posts: 1
Points: 2

Can anyone help me understand why this code below works great for tabbed browsing in FireFox 20.0.1, but not Chrome 26.0.1410.64m?

CSS:

/* all tabs */
 
.tabs input {display:none}
 
.tabs label {
    background-color:#ccc; 
    border:solid 2px #fff;
    cursor: pointer;
    display:inline-block; 
    padding:5px 15px;
}
 
.tabs div {
    display:none;
    border:solid 2px #adf; 
    padding: 15px;
}
 
/* tabs-1 */
 
#tabs-1 :checked + * + * + label { background-color:#adf;border-color:#adf}
#tabs-1 :checked + * + * + * + * + * + div { display: block }

HTML
<div id="tabs-1" class="tabs"> 
 
    <input id="tab-1-1" name="tabs-group-1" type="radio" checked />
    <input id="tab-1-2" name="tabs-group-1" type="radio" />
    <input id="tab-1-3" name="tabs-group-1" type="radio" />
 
    <label for="tab-1-1">Tab 1-1</label>
    <label for="tab-1-2">Tab 1-2</label>
    <label for="tab-1-3">Tab 1-3</label>
 
    <div>#1</div>
    <div>#1<br>#2</div>
    <div>#1<br>#2<br>#3</div>
 
</div>