Проблема с радиоуправлением в Opera Mini

Question

Итак, у меня есть две радиокнопки:

<input type="radio" name="hello" id="a" value="a">
<label for="a">First</label>
<input type="radio" name="hello" id="b" value="b">
<label for="b">Second</label>

Ожидаемая функциональность - когда я нажимаю в любом месте на ярлыке переключателя, радио выбирается. (Мне не нужно точно нажимать на круг радиопереключателя)

Теперь я сделал свой собственный стиль для радиокнопок, поэтому я скрываю радиокружки следующим образом:

input[type="radio"] {
display:none;
}

Теперь, похоже, он отлично работает во всех браузерах, но откройте ссылку в Opera mini, и вы не сможете переключить выбранную кнопку, так как метка для подхода к нажатию на метку не работает. Вы должны нажать на сам круг, и поскольку я скрыл круг, переключатели не будут работать.

Для демонстрации, перейдите по этой ссылке из любого другого браузера и Opera Mini.

Любая идея, что может заставить его работать на Opera mini. Есть ли способ указать в CSS, которые не используют display:none если браузер это Opera mini?

Answer 1

Я закончил тем, что изменил радио-кнопки на <input type="button"...> вместо.

onClick кнопки я вызываю функцию javascript для каждой кнопки и в css есть два разных правила для каждого состояния, которые переключаются с javascript. Этот хак оказывается более эффективным и надежным, чем другие хаки. Это также гарантирует, что эта функциональность будет работать не только в Opera mini, но и в любом другом браузере, который обрабатывает метки переключателей, такие как Opera mini.

Answer 2

Есть хороший БАГ в Opera Mini с метками и CSS

в моем CSS я имел

 label {
 cursor: pointer;
 }

это заставило Opera Mini обновлять страницу, отправляя GET-запрос на сервер каждый раз, когда вы щелкали по ярлыку, это нарушало процесс, когда вы на странице POST.

Answer 3

Вы можете добавить этот JavaScript на свою страницу.

Он работает со строкой User Agent, но обычно не является хорошей идеей.

Он проверяет, является ли пользовательский агент Opera Mini, затем устанавливает переключатели style.display в block или же none

if (window.addEventListener){           
    window.addEventListener('load', setRadioButtons, false);
} else {
    window.attachEvent('onload', setRadioButtons);
} 

function setRadioButtons() {
    for (i=0; i<document.getElementsByTagName('input').length; i++) {
        if (document.getElementsByTagName('input')[i].type == 'radio' && navigator.userAgent.indexOf("Opera Mini") != -1)
            document.getElementsByTagName('input')[i].style.display = "block";
        else
            document.getElementsByTagName('input')[i].style.display = "none";   
    }
}