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