:focus on divs not working??

[shachi]

Hello everyone,
Can anyone please tell me what I am doing wrong in the following??

#test {
height: 100px;
width: 100px;
background-color: red;
border: 1px solid;
}
#test:focus {
border: 1px dotted;
}

markup

...(rest of the code)
<div id="test"></div>
...

What I want to do is when the user click on the div it should turn it's border into dotted but unfortunately it is not going as it should. Any ideas?? Thanks.

[blm126]

well you need a border color. Also what browser are you testing in?

[mwinter]

Can anyone please tell me what I am doing wrong in the following??

I can tell you from the thread title: div elements don't receive focus. Focus is typically limited to only links and form controls.

I say typically because there are some exceptions. For example, Opera provided rich keyboard navigation features, allowing the user to move between headings and even elements. In this mode, moving to a non-interactive element could give it focus (it appears to take a couple of seconds; I suppose Opera wants to be sure that the focus was intended). Browsers that are aimed at assisting disabled users might also offer similar features.

What I want to do is when the user click on the div it should turn it's border into dotted but unfortunately it is not going as it should. Any ideas??

Scripting, and all its attached caveats, is your only option for a wider audience.

Mike

[shachi]

blm126: firefox, no I don't think it is a must to declare border color if nothing is declared then it sets the default value #000000.
mwinter: so shall I use javascript for this?? something like

...
function focus(obj){
obj.style.border = "1px dotted";
}
...
<div id="test" onclick="focus(this)"></div>
...

[mwinter]

function focus(obj){
obj.style.border = "1px dotted";
}

Better would be:

/* Use names that reflect purpose... */
function setBorder(element) {
    /* ...and feature detect! */
    if (element.style) {
        element.style.border = '1px dotted';
    }
}

but yes, something like that.

Mike

[shachi]

Ok thanks!!!

[blm126]

blm126: firefox, no I don't think it is a must to declare border color if nothing is declared then it sets the default value #000000.

No, it sets it to the browsers default. That is an important difference

[mwinter]

[Default border colours] No, it sets it to the browsers default.

No, it doesn't. If the colour isn't specified, the same colour as the color property is used. See section 8.5.2 in the CSS 2 Specification, particularly the example at the end.

That is an important difference

Quite.

Mike

[blm126]

My bad , but in my defense if you apply the transitive property...