Estou criando um site mobile e em uma determinada parte existe um sistema de abas. O sistema é puro css
que encontrei pela internet... O problema é que quando o site é visualizado pelo celular, as abas não funcionam direito. No iOS por exemplo, nem chega a funcionar.. já em alguns Androids, funciona e em outros não.
HTML:
<div class="tabs" id="tabs-1">
<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">ABA 1</label>
<label for="tab-1-2">ABA 2</label>
<label for="tab-1-3">ABA 3</label>
<!-- Aba 1 -->
<div class="tab-content">
CONTEUDO ABA 1
</div>
<!-- Aba 2 -->
<div class="tab-content">
CONTEUDO ABA 2
</div>
<!-- Aba 3 -->
<div class="tab-content">
CONTEUDO ABA 3
</div>
CSS:
.tabs input[type='radio'] { display:none }
.tabs label {
width:100px; text-align:center; padding:20px 0;
color:#666666; font-size:2.1em; font-family:'DIN-Light'; background-color:#EEEEEE;
display:inline-block;
cursor:pointer;
}
.tab-content { display:none; background-color:#F3F3F3; border-top:6px #FE7B43 solid; width:300px; text-align:center; padding:50px 0; position:relative; }
#tabs-1 :checked + * + * + label { background-color:#FE7B43; color:#FFF; }
#tabs-1 :checked + * + * + * + * + * + .tab-content { display: block }
Alguém sabe por que isso?