CSS指定伪元素：后面的输入 [英] CSS to specify pseudo element :after following input

问题描述

我有html代码，我不能改变。
我不能使用JS的帮助。所以唯一的选择是CSS。示例：
http://jsfiddle.net/4gKPL/

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.

推荐答案

因为你不能使用： on 输入元素，我可以想到的是一个真正的黑客解决方案：选择下面的元素并插入：之前伪元素。

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';
}

查看此jsFiddle 的工作示例。

编辑

.error-message 元素不总是出现在这个计划中抛出一个扳手。你可以对：before（ +：before ）之前进行一个无前缀的调用，但是如果下面的元素以某种方式隐藏，那么你的OK消息。即使它存在，它会拾取下面的元素的样式。请参阅此更新的jsFiddle 。

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.

这篇关于CSS指定伪元素：后面的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！