Highlight a form select element if its value is empty

Question

I have a form where people sign up for a shift. There are multiple shifts on the page, and I have an onchange event that sends the sign-up via Ajax.

<select name="user" class="assign_user" id="user1">
   <option value="user1234" selected="selected">Joe Bloggs</option>
   <option value="">No-one</option>
   <option value="user1235">Jane Mahon</option>
   <option value="user1236">Ahmed Kitab</option>
   <option value="user1237">Dave Smew</option>
</select>

If <option value="">No-one</option> is selected, I want to highlight the select element in yellow.

I cannot think of a way to do this with just CSS. I tried

select[value=''] {  
   background-color:lightyellow; 
}

but the attribute filter in the square brackets doesn't accept empty values, as far as I know.

EDIT: just to be clear, empty select elements should be highlighted when the page loads, as well as when the element changes

Answer 1

CSS

.empty {
    background-color: lightyellow;
}

Javascript

function userChanged(select) {
    select = $(select);
    if (select.val() === "") select.addClass("empty");
    else select.removeClass("empty");
}

// UPDATED: Initialization
$(function() {
    var user1 = $("#user1");
    user1.change(function() { userChanged(user1); });

    // Highlights select when page loads.
    userChanged(user1);
});

UPDATE: Future solution uses CSS only. From: Is there a CSS parent selector?

select:has(option:checked[value='']) {
    background-color: lightyellow;
}