Search code examples
javascripthtmlcsswebkit

Webkit does not update CSS styles with sibling and attribute selector

I'm working on a form in .NET and am using the standard field validators. What I want is to make the input field change background color if the user clicks the "submit" button without filling in the mandatory field (the requiredfieldvalidator tag becomes visible).

I've done this by having a requiredfieldvalidator just before the input field. When the user clicks the "submit" button, the validator changes from display:none to display:inline. But what I'm interested in is setting a different background color on the input field, so I did something like this:

CSS

.error[style*="inline"] + input { background-color: #e8bab2; }

HTML

<span  class="error" style="display:none;"></span>
<input type="text">
<input type="button" id="sendme" value="Send" />

JS (the validator handles this part)

$(function() {
    $("#sendme").click(function() {
        $(".error").css("display","inline");
    });
});

The problem is that the field will light up as red in Firefox when I click the button but in Webkit (Chrome 19/Safari 5.1) the input field won't change background color until I click the input field.

I've created a fiddle, compare the behavior between Firefox and Webkit browsers.

(note: all the JS logic is deleted to make it more "clean")

Solution

  • It happens! Please check this out:

    Chrome