CSS to specify pseudo element :after following input

Question

I have html code that I cannot change. I cannot use JS for help. So the only option is CSS. example here: http://jsfiddle.net/4gKPL/

HTML:

<!-- code for input -->
<div class="form-group complete">
<label>label for text input</label>
<input type="text"/> <span class="error-message">This is an error message</span>

</div>
<!-- code for dropdown -->
<div class="form-group complete">
<label>label for select input</label>
<div class="custom-selectbox custom-selectbox-form">
    <select name="sth" required>
        <option>a</option>
        <option>b</option>
        <option>c</option>
        <option>d</option>
    </select> <span class="selectedValue">&nbsp;</span>
<span class="is-visually-hidden">select to open the list</span>

</div> <span class="error-message">This is an error message</span>

</div>

CSS:

.complete:after {
    content:'OK';
}

I need to display additional content (in this example 'OK') for input fields but not for select.

Spans after interactive components are optional so don't have to exist.

Any idea about how define this selector?

Answer 1

Since you can't use :after on input elements, all I can think of is a really hackish solution: select the element following and insert a :before pseudo element in front of it.

.complete input[type="text"] + .error-message:before {
    content:'OK';
}

See this jsFiddle for a working example.

EDIT

The .error-message element's not always being present throws a wrench in this plan. You can make an unprefixed call to :before (+ :before), but then if the following element is hidden in some way, so will your OK message. And even if it is present, it picks up the styles of the element following. See this updated jsFiddle.

I'll leave this idea up so people can see it, but it doesn't look like it will work for your purposes.