Radiobutton issue with Opera Mini

Question

So I have two radiobuttons like this:

<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>

Expected functionality is when I click anywhere on the label of the radio button, the radio gets selected. (I do not have to exactly click on the circle of radiobutton)

Now, I have done my own styling for the radiobuttons so I hide the radio circles like this:

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

Now, it seems to work great on all browsers but open the link in Opera mini and you can't switch the selected button since the label for approach to make the button selected on click on the label doesn't work. You have to click on the circle itself and since I have hidden the circle, radio buttons won't work.

For demo, visit this link from any other browser and opera mini.

Any idea what could make it work on Opera mini. Is there a way to specify in css that don't use display:none if the browser is Opera mini?

Answer 1

I ended up changing the radio buttons to <input type="button"...> instead.

onClick of button I am calling javascript function for each button and in css have two different rules for each state which are switched from javascript. This hack turns out to be more efficient and reliable than other hacks. It also ensures that not only Opera mini, the functionality would also work on any other browser which handles radio button label tag like Opera mini.

Answer 2

there is a nice BUG in opera mini with labels and css

in my css i had

 label {
 cursor: pointer;
 }

this caused opera mini to refresh the page making a GET request to the server everytime you clicked a label this broke down the flow when you we're on a POST page

Answer 3

You could add this javascript to your page.

It works with the User Agent's string but usually isn't a good idea.

It checks if the User Agent is Opera Mini then sets the radio buttons style.display to block or 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";   
    }
}