I have an input field and on onfocus event of the field, I set a data-attribute on one of the parent node of the field. For example, onfocus event, I set data-focus="true" Based on the value of this attribute, I want to change the background color of an a child of the parent node using css3 selector. But it does not change the background color. It does work as expected on all other major browsers. Please find the sample html file that repros this bug.
For some reasons, I cannot attach my html file to the bug. Please see the sample html inline <!DOCTYPE html> <html> <head> <title>Test page</title> <style> #ct[data-focus="true"] #message { background-color:blue; } </style> <script type="text/javascript"> function onFoucsCallback(e) { var s = document.getElementById("message"); s.innerHTML = "Focus"; var d = document.getElementById('ct'); d.setAttribute("data-focus","true"); // Expected: Background color of div with id as message changes to blue // Actual: Does not change to blue in webkit based browsers (such as Safari and Chrome). It does change in Firefox, Opera and IE } function onBlurCallback(e) { var s = document.getElementById("message"); s.innerHTML = "Blur"; var d = document.getElementById('ct'); d.removeAttribute("data-focus"); // Expected: Background color of div with id as message changes is no longer blue // Actual : On Opera, background color still remains blue. Cannot test the behavior on Webkit based browser. It works as expected in Firefox and IE } </script> </head> <body> <div id="ct"> <form> <input type="text" onfocus="onFoucsCallback(event);" onblur="onBlurCallback(event);"/> </form> <div id="message"></div> </div> </body> </html>
Works for me (Chrome 14 and WebKit nightly on Mac OS X, Chrome 15 on Windows 7). Doesn't work in Safari 5 on OS X so I suspect this was a bug that has been fixed in head.