How to make CSS warning if empty <input> (preferably without JS)

Yes,you can use only CSS, not JS or jQuery to achieve the results,for example:

HTML:

<input placeholder="name" type="text" />
<input placeholder=" " type="text" />

CSS:

::-webkit-input-placeholder {
    color: #fff;
    background: red;
}
:-moz-placeholder { /* Firefox 18- */
    color: #fff;
    background: red;
}
::-moz-placeholder {  /* Firefox 19+ */
    color: #fff;
    background: red;
}
:-ms-input-placeholder {  
    color: #fff;
    background: red; 
}

The precondition is that you need a placeholder attribute and it's not none. See this exmaple from this JSFiddle.

You can read this passage Style Placeholder Text about this css property to know more.

You can do that using JS / jQuery like:

HTML

<input id="name" placeholder="name" type="text" />

jQuery

$('#name').on('blur', function(){
        if(!$(this).val().trim()){
            $(this).css({
                'background-color': 'red'
            })
        }else{
            $(this).css({
                'background-color': 'white'
            })
        }
    })

Please have a look in the following link: JSFIDDLE

The closest pure-CSS approach requires the browser to support the :required pseudo-class. Your input would have the required attribute like so:

<input id="test1" name="test1" type="text" required />

And your CSS would look like:

input:required {
    background-color: red;
}

Here is an example jsfiddle:

http://jsfiddle.net/5L5hx4bo/

However, this would set the style for the input on page load, not when the field lost focus, but this makes more sense, from a CSS/document perspective. For a field to change style based on state, it would be one of three 'states':

invalid :

Which could be handled similar to above but using

input:invalid {
    background-color: red;
}

But a blank text input would not be considered "invalid" and thus would never get styled by such a rule. However, an input with a type like "email" that had a value set to "bogus#value" would get styled, since the value is not considered valid for that type.

required:

The blank text input would be considered a match if required attribute is set, however this would be a match when the form initially loads as well.

focus (negative rule) :

You could have a CSS rule for when the input does not have the state of being in focus, but this is not the same as "on blur". Similar to required, the rule would be applied when the element loads, not exclusively when focus is lost.

Since your requirements for the style are :

• When an input's state changes from in-focus to not-in-focus
• When an input is type text and value is empty
• When an input was most recent element with state of in-focus changing to not-in-focus (so style rule is removed from an input once another input loses focus and has style rule applied)

This would not be something that would be considered a "pure CSS" type state, and thus should be handled via javascript.

This would not be possible solely with CSS. JS / jQuery are required to do DOM manipulation and scripting in general.

For example, if you had this:

<input type="text" id="input" />

You can use jQuery to check for change and change background color onblur.

var initalValue;
$("#input").focusin(function() {
    initialValue = $(this).val();
});
$("#input").focusout(function() {
    if($(this).val() != initialValue) {
        $(this).css("background-color", "red");
    } else {
        $(this).css("background-color", "white");
    }
});

See this JSFiddle.

EDIT Upon reading your question again I noticed I read it wrong. My answer made the background red if there was any change, but you want background red if the <input> is blank. You can do this with:

$("#input").focusout(function() {
    $(this).css("background-color", ($(this).val() == "") ? "red" : "white");
});

See the updated JSFiddle.