Question

我有html代码，我无法改变。我无法使用JS寻求帮助。所以唯一的选择是CSS。这里的例子： 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';
}

我需要为输入字段显示其他内容（在此示例中为“确定”，而不是选择。

交互式组件是可选的，因此不必存在。

有关如何定义此选择器的想法吗？

Answer 1

由于您无法在:after元素上使用input，我所能想到的只是一个非常虚伪的解决方案：选择以下元素并插入:before伪元素前面。

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

See this jsFiddle是一个有效的例子。

修改

.error-message元素并不总是存在，这会给这个计划带来麻烦。你可以在之前（+ :before）进行一个没有前缀的调用，但是如果以某种方式隐藏了以下元素，那么你的OK消息也是如此。即使它存在，它也会选择以下元素的样式。请参阅this updated jsFiddle。

我会留下这个想法，以便人们可以看到它，但它看起来不适合你的目的。

CSS指定伪元素：后面输入

1 个答案: