My HTML code is set and I'm unable to make changes, plus JavaScript isn't an option in this case. That leaves CSS as the only solution. For example, you can see the code here: https://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"> </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'm looking for a way to add extra content (like 'OK' in the example) specifically for input fields, but not for selects.
The presence of spans after interactive components is not mandatory and they may be absent.
Any suggestions on how to define this selector?