在“输入”元素之前或之后生成CSS内容[重复]答案

【问题标题】：CSS content generation before or after 'input' elements [duplicate]在“输入”元素之前或之后生成CSS内容[重复]
【发布时间】：2011-06-02 06:34:19
【问题描述】：

在 Firefox 3 和 Google Chrome 8.0 中，以下内容按预期工作：

<style type="text/css">
    span:before { content: 'span: '; }
</style>

<span>Test</span> <!-- produces: "span: Test" -->

但当元素为<input>时不会：

<style type="text/css">
    input:before { content: 'input: '; }
</style>

<input type="text"></input> <!-- produces only the textbox; the generated content
                                 is nowhere to be seen in both FF3 and Chrome 8 -->

为什么它没有像我预期的那样工作？

【问题讨论】：

<input> 需要自行关闭。如果你想给你的文本框一个标签，使用<label>。
我意识到这是一个较旧的线程，但是...... BoltClock 的评论在语义上是正确的，并且得到了 CSS 纯粹主义者广泛持有的观点的支持，即 CSS 应该仅用于设计（而不是用于内容）。但是，我认为标签元素等是设计元素——所以我觉得在这种情况下，CSS 是实现预期结果的正确途径。
@Joshua：我不确定。我不认为成为一名 CSS 纯粹主义者可以赚到很多钱。我听说他们中的一些（全部？）也不喜欢 CSS 中的变量等。这太荒谬了。我同意，尽管标签可以被视为内容，所以我不确定。不过，我认为限制在实践中没有多大意义......
同意。我认为最好将笼统的“纯粹主义风格”规则应用于那些刚刚学习工具集的人。但是一旦你掌握了它们，并且能够理解抽象在 CSS 中所扮演的角色类型，那么就可以开始质疑和扩展这些界限了。如果你在此之前这样做，你只会变得更加困惑。我想这就是编码和编程之间的区别。“看，它做了什么”与“看我做了什么”。这只是我的看法。

标签： html css

【解决方案1】：

使用:before 和:after，您可以指定应该在该元素的内容之前（或之后）插入哪些内容。 input 元素没有内容。

例如如果您写<input type="text">Test</input>（这是错误的），浏览器将更正此问题并将文本放在输入元素之后。

您唯一能做的就是将每个输入元素包装在一个 span 或 div 中，并在这些元素上应用 CSS。

查看specification中的示例：

例如，以下文档片段和样式表：
<h2> Header </h2>               h2 { display: run-in; }
<p> Text </p>                   p:before { display: block; content: 'Some'; }
...将以与以下文档片段和样式表完全相同的方式呈现：
<h2> Header </h2>            h2 { display: run-in; }
<p><span>Some</span> Text </p>  span { display: block }

这也是为什么它对<br>、<img>等不起作用的原因相同（<textarea>似乎很特殊）。

【讨论】：

@Jason 为什么，当然是jquery！编辑：另外，您可以使用图钉、喷漆或 summin。或火灾。
使用按钮元素代替：jsfiddle.net/svandragt/gRgcb
这是我真正想要的：<input name='…' type='…' required>，然后是input[required]::after { content: ' *'; color: red; }。叹息。
@thirdender：这显然是设计问题。是的，我知道你的感受。
引用的规范说：“该规范没有完全定义 :before 和 :after 与替换元素（例如 HTML 中的 IMG）的交互”，并且 INPUT 可以解释为替换元素。因此，规范并没有说:before 不适用于此类元素。相反，它是未指定的。

【解决方案2】：

这并不是因为input 标签本身没有任何内容，而是因为它们的内容超出了 CSS 的范围。

input 元素是一种称为 replaced elements 的特殊类型，这些元素不支持 :pseudo 选择器，例如 :before 和 :after。

在 CSS 中，被替换的元素是一个元素 ，其表示为超出 CSS 的范围。这些是一种外部对象，其表示独立于 CSS。典型的替换元素是<img>、<object>、<video> 或<textarea> 等表单元素和<input>。某些元素，如 <audio> 或 <canvas> 被替换仅在特定情况下的元素。使用 CSS 插入的对象内容属性是匿名替换元素。

请注意，这甚至被称为in the spec：

本规范并未完全定义:before的交互和 :after 替换元素（例如 HTML 中的 IMG）。

还有more explicitly：

被替换的元素没有::before 和::after 伪元素

【讨论】：

【解决方案3】：

这样的工作：

input + label::after {
  content: 'click my input';
  color: black;
}

input:focus + label::after {
  content: 'not valid yet';
  color: red;
}

input:valid + label::after {
  content: 'looks good';
  color: green;
}

<input id="input" type="number" required />
<label for="input"></label>

然后添加一些浮动或定位来订购东西。

【讨论】：

虽然这可行，但如果您需要保持标记可访问，这不是一个好主意。 CSS 内容should only be used for design。在这种情况下，使用 javascript 将有用的信息输入到标签中是一种更好的方法。
当然！我是在回答这个问题，而不是试图让代码适用于所有情况。这应该让人们朝着正确的方向前进。处理可访问性的一些方法是为各种文本添加多个标签，并使用display: none 隐藏不相关的文本。

【解决方案4】：

fyi <form> 也支持 :before / :after，如果你用它包裹你的 <input> 元素可能会有所帮助......（我自己也遇到了设计问题）

【讨论】：

fieldset 可能比 form 更合适，如果你想要一个输入元素的简单包装器。
而span 或div 可能比fieldset 更合适，因为对于后者，您需要覆盖所有用户代理css（至少边距、填充、边框）

【解决方案5】：

使用标签label和我们的方法for =，绑定到input。如果遵循表单的规则，并避免与标签混淆，请使用以下内容：

<style type="text/css">
    label.lab:before { content: 'input: '; }
</style>

或比较（短代码）：

<style type="text/css">
    div label { content: 'input: '; color: red; }
</style>

形式....

<label class="lab" for="single"></label><input name="n" id="single" ...><label for="single"> - simle</label>

或比较（短代码）：

<div><label></label><input name="n" ...></div>

【讨论】：