Home/ Questions/Q 9199997
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T22:40:02+00:00

I have a radio button inside a content editable div. But when I click

  • 0

I have a radio button inside a content editable div. But when I click on the radio button nothing happens in Firefox and IE. But it works fine in Chrome.

What can I do to make this work in Firefox and IE?

The code is available at http://jsbin.com/uqexoy/2/edit and is simply:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div contentEditable="true"><input type="radio" />ere er er er re </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This was tested to work in IE8, IE9, Chrome and Firefox. It does work, albeit rather strangely so, also in Opera, where the input field (in our case a radio button) does change it’s status to checked (tested with JavaScript alert(this.checked);), however it doesn’t change it’s appearance to reflect that. See for a possible workaround below.

    The solution for the majority of the problematic browsers is to wrap non-editable contents in a span, like so:

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div contentEditable="true">
    <span contentEditable="false">
      <input type="radio" />
    </span>ere er er er re 
  </div>
</body>
</html>

    As for the Opera part, the fact that it doesn’t reflect changes to the radio button‘s selected state ‘should’ be possible to override by styling its two different states with CSS selectors input[type="radio"] and input[type="radio"]:checked and applying these two CSS rules only to Opera browsers. Opera seems to accept background-color property changes for such radio buttons, which doesn’t make any difference in all other browsers I’ve tested in. This might be your way to apply Opera specific CSS rule to reflect changes to the checked state. Here’s an example:

    input[type="radio"]:checked {background-color:gray;}

    Other browsers will simply ignore this CSS rule. Another acceptable Opera specific rule that can be applied is border, but I find that of limited to no value in our case.

    • 0