相关疑难解决方法(0)

在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 -->

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

在我们的Angularjs应用程序中,我们动态设置所需的字段(ng-required).因此,*每次需要时向标签添加都非常复杂.

现在我们有了另一个想法.可以根据需要标记输入字段本身.在这篇文章中,我们找到了解决方案的一部分.

有一个必需字段的CSS选择器,所以我们可以像这样为它设置一个背景图像:

input:required:valid {
  background-image: url(valid.png);
  background-position: right center;
  background-repeat: no-repeat;
}
input:required:invalid {
  background-image: url(invalid.png);
  background-position: right center;
  background-repeat: no-repeat;
  -moz-box-shadow: none;
}

<p>Name:</p>
<input type="text" name="name" required />

但是使用这种方式,我们需要一个背景图像*,这似乎非常hacky.特别是,如果表格有不同的尺寸,那么图像有不同的分辨率.

比我们找到这个(Section Labeled)示例,似乎可以将Text添加到输入字段.

所以问题是,如何将所有这些放在一起,以便我可以将一个glyphicon从twitter-bootstrap放到输入字段的右侧,如果需要,而不编辑所有表单？

她是一个小伙伴.可能的工作,但问题是,这样的背景下,大小是不支持无处不在.