Given the code below:

function test() {
    document.forms[0].TEST[0].focus();
}

    <form>
        <input type="button" value="Test" onclick="test()" />
        <input type="radio" name="TEST" value="A">A</input>
        <input type="radio" name="TEST" value="B">B</input>
    </form>

In IE6, clicking the button doesn't focus the control, unless I've already tabbed through the radio at least once, in which case it works. =/

Any idea how I should be focusing the control? The above works perfectly fine in FF of course.

Edit: I found that the control is being focused, except the highlight box around the radio button is not being rendered. (I can hit space to activate the radio button, and also use arrow keys to change the active button). So the question becomes: how can I force the focus highlighting box to render?

• javascript
• internet-explorer

Actually it's focussing, you can test it by focusing the second item and after clicking the button click space, you can see the second item selected. This shows the items are getting focus but I think you mean the dashed selection after focus. I don't know how to do that.

There's an option in the Accessibility Advanced Options of Internet Explorer that says something like "Move the system cursor with selection or focus". It might be a solution if you have a way to propagate IE settings.

edit: it doesn't work

You can force any style for the focus' outline

function test() {
    document.forms[0].TEST[0].focus();
}

/* if this CSS rule is overrode by another one, then strengthen the selector of this rule to make it more specific (or use "!important") */
input[name=TEST]:focus {
    outline: 1px dotted blue;
}

<form>
    <input type="button" value="Test" onclick="test()" />
    <input type="radio" name="TEST" value="A" />
    <input type="radio" name="TEST" value="B" />
</form>