I don’t believe it. After two days of trying to get this to work all I needed to do was use onblur!
However, there are two problems:
Hovering over some elements on the page causes it to lose focus without clicking on another element.
onblur doesnt seem to work when some elements are placed within the container that has the onblur. I cant seem to figure out why this is. Putting a form inside it causes onblur not to work.
When you click the div, the class is added. When you click the document, the class is removed. The key is: evt.stopPropagation();
The event model in browsers lets an event pass up the chain of ancestors, so a click on the <div> will also be responded to by any click events attached to the document. In other words clicking the div will add the class, but then the document’s click handler will remove it. jQuery’s stopPropagation() method stops the event from passing up the chain to the document.
Seeing as this is only a style implementation, it maybe that it would not remove much functionality out of the form only style if the browser cannot render pseudo-selectors efficiently. Most modern browsers cater for pseudo-selectors, and even if a user still insists on using an older web browser, surely they would mind loosing a different color border round a focused form input?
Would it be worth calling in a javascript library to add a certain style change when a form input is selected? IMHO I do not think so.
Unfortunately the :focus pseudo-class doesn’t apply to a <div> (which is the original poster’s goal). If you want to toggle the appearance of that <div>, you’ll need a JavaScript solution.