使用 CSS 为某些输入字段设置输入后缀 [重复]答案

【问题标题】：Set input-suffix for certain input fields with CSS [duplicate]使用 CSS 为某些输入字段设置输入后缀 [重复]
【发布时间】：2014-07-12 11:08:24
【问题描述】：

我正在处理具有不同输入字段的输入表单。他们都通过form 获得一个属性。

例如：

<input class="input-text" form="price">

或

<input class="input-text" form="percent">

我想添加一个带有伪元素::after 的后缀，但不知道怎么做。

我已经尝试过这个 CSS：

input[form="price"]::after{
    content: "&euro;";
}

还有这个：

input::after[form="price"]{
    content: "&euro;";
}

问题似乎出在::after 本身，但我无法弄清楚它是什么。

【问题讨论】：

除了给出的关于在输入元素上生成内容的答案之外，您的尝试还有一些其他问题 1) content 作为 CSS 属性不理解 HTML 字符实体引用 - 您可以使用适当的 Unicode 转义符或实际的欧元符号 2) ::after 作为伪元素必须放在选择器的最后。
同意。你必须使用€ 而不是&euro;

【解决方案1】：

after 和 before 等伪类不能用于输入元素。为什么这样？因为它们仅适用于可以包含 html 标记的元素。输入标签不会。

还有其他类似这样的问题：

【讨论】：

【解决方案2】：

明确地说不，你不能在非容器标签中这样做。

根据 w3 标准，:after 或 :before 只能用于容器元素。所以你必须使用javascript。

但是有一个替代方法可以使用contenteditable 属性，它使 div 可编辑，然后您可以使用 after 标记。但是contenteditable是在html5中引入的。

这是一个 js fiddle http://jsfiddle.net/madterry/W4Y58/ 。不利的一面是您不能将其用作表单字段，并且未得到广泛支持。

【讨论】：

【解决方案3】：

问题是，伪元素仅在 容器元素 上支持，而不在所有已替换的元素上，如 images 或输入字段。

这是因为它们在元素本身中呈现，这在input元素上显然是不可能的。

在W3C specification 中，它甚至被定义了。

【讨论】：