How to hide a radio button on all browsers except Internet explorer?

Question

I've code like given below:

<label>
   <input type="hidden" name="styless" value="9">
   <input type="radio" style="display:none" >Qwerty
</label>

This is working fine on all browsers except Internet Explorer. How do I display the radio button in the IE browser, and make it remain hidden on other browsers?

What happens in IE is when I click on "Qwerty", the click event is not fired. So i want to remove display:none in IE only.

Answer 1

Generally you shouldn't try to make page behavior browser-specific. I would argue that a much better solution would be to make the "Qwerty" text click act the same way on all browsers.

You can do it with JavaScript - wrap the text in a <span> element, and give it an onclick event which would check your radio button. To find the radio button reliably, you should give it an id attribute. Then call preventDefault on the click event, to avoid any unwanted behavior which may or may not happen otherwise.

Your final HTML should look like this:

<label>
   <input type="hidden" name="styless" value="9">
   <input type="radio" style="display:none" id="qwerty-radio-box">
   <span onclick="document.getElementById('qwerty-radio-box').checked = true; event.preventDefault();">Qwerty</span>
</label>

In your question, you didn't mention whether or not your project already has a JavaScript codebase. If it does, you should move the JavaScript code there, instead of keeping it in this onclick event attribute. If it doesn't, and this is the only usage, I'd say it's fine leaving it here.