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: 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?

possible duplicate of CSS :after pseudo element on INPUT field — Paulie_D
– Paulie_D, Commented Jul 21, 2014 at 14:05

Ryan Mitchell · Accepted Answer · 2014-07-21 14:26:30Z

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.

edited Jul 21, 2014 at 14:26

answered Jul 21, 2014 at 14:17

Ryan Mitchell

7445 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan Mitchell Over a year ago

@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.

Collectives™ on Stack Overflow

CSS to specify pseudo element :after following input

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related