Переключатель не проверяется при нажатии, т.е. браузер в ионном

Question

Пользовательский переключатель не проверяется при клике на браузере в ионной структуре.

HTML

<div class="common-gender-btn" id="gender">
              <input id="male" type="radio" name="gender" value="Male"/>
              <label class="male icon-male-1" for="male"></label>
              <input id="female" type="radio" name="gender" value="Female"/>
              <label class="female icon-female-1" for="female"></label>
            </div> 

CSS

**

.common-gender-btn{}
.common-gender-btn input[type=radio] {
           opacity: 1;
    position: absolute;
    top: -9999px;
}
.common-gender-btn input[type=radio] + label.male { 
    float: left;
    font-size: 38px !important;
    text-align: center;
    color: #939597;
    cursor: pointer;
    margin-right: 15px;
    display: inline-block;
}
.common-gender-btn input[type=radio][disabled] + label.male {
    opacity: 0.4;
}
.common-gender-btn input[type=radio]:checked + label.male {
    cursor: pointer;
    color: #0c4f9f;
}
.common-gender-btn input[type=radio] + label.female {
    float: left;
    font-size: 38px !important;
    color: #939597;
    cursor: pointer;
    margin-right: 15px;
    display: inline-block;
    text-align: center;
}
.common-gender-btn input[type=radio][disabled] + label.female {
    opacity: 0.4;
}
.common-gender-btn input[type=radio]:checked + label.female {
    cursor: pointer;
    color: #0c4f9f;
}

**

Пользовательская кнопка-переключатель css не работает при нажатии. Пользовательский переключатель не проверяется при клике в браузере в ионной структуре.