When styling an input element with JavaScript, it seems that any properties set this way are ignored in a :focus rule.
An example is provided to illustrate this:
- Initially, the background and border of the input element matches the surrounding element (div.header)
- By clicking on the [open] link, the hidden div.body element is revealed.
- To make it clear that the title is a text field, the background and border of the input should match the newly shown textarea.
A :focus rule is set for both the textarea and the input, coloring the background yellow when they have focus.
However, this doesn't work on the input element because the properties were programmatically set. If these properties aren't set, the :focus works as expected. Properties set by the :focus rule that are not also set using .css() are honored.
This behavior is consistent across Safari, Firefox, Chrome, and IE, indicating that it is "expected behavior." Unfortunately, there doesn't seem to be any information online explaining why this is correct.
While it's possible to achieve the desired result using blur and focus handlers, the question remains about why this behavior occurs in the first place.