1

I have html code that I cannot change. I cannot use JS for help. So the only option is CSS. example 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">&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?

Syscall
  • 19,327
  • 10
  • 37
  • 52
griid
  • 11
  • 1
  • 4
  • 1
    possible duplicate of [CSS :after pseudo element on INPUT field](http://stackoverflow.com/questions/2587669/css-after-pseudo-element-on-input-field) – Paulie_D Jul 21 '14 at 14:05
  • 2
    You cannot use pseudo elements on `input' elements. – Paulie_D Jul 21 '14 at 14:05

1 Answers1

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.

Ryan Mitchell
  • 754
  • 5
  • 8
  • @TonyChen Oh, I think I misunderstood what he meant by that. Well, if that's the case, you can make an unprefixed call to :before, e.g. `input[type="text"] + :before {}`. But that has it's own problems. I'll update the post. – Ryan Mitchell Jul 21 '14 at 14:22