Tab system does not work on mobile

Question

I am creating a mobile site and in a certain part there is a system of tabs. The system is pure css that I found on the internet... The problem is that when the site is viewed by mobile, the tabs do not work properly. On iOS, for example, it doesn’t even work.. On some Androids, it works and on others it doesn’t work.

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 }

Online example.

Does anyone know why?

Answer 1

Man, I think the problem is in this code snippet

#tabs-1 :checked + * + * + label { background-color:#FE7B43; color:#FFF; }
#tabs-1 :checked + * + * + * + * + * + .tab-content { display: block }

better you change this code and use jquery tabs, it is more guaranteed

http://jqueryui.com/tabs/