伪元素":"或":之前"不在angular2 app上渲染

时间:2016-11-23 09:17:01

标签: css

我们有一个带有节点的angular2 web应用程序,我们正在使用webpack捆绑所有内容。

问题是在这个过程的某个地方,即使我们为这些伪元素添加类,它们也不会出现在DOM中,它们也不会被渲染。我们的应用程序将直接在脚本标记中注入样式,并添加id以将css属性范围限定为每个角度组件。

我们在很长一段时间内一直在努力解决这个问题,并且不知道它是否会成为我没有看到的小事或更大的事实,例如我们的堆栈中的渲染问题。你们有什么想法吗?

以下是渲染的CSS:

<style>

//blah blah blah some other styles

.signUp-userInput[_ngcontent-xtv-3]:before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDEzIDE1Ij48ZyBmaWxsPSIjNTU1IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxlbGxpcHNlIGN4PSI2LjUiIGN5PSIzLjUiIHJ4PSIzLjUiIHJ5PSIzLjUiLz48cGF0aCBkPSJNMTMgMTVjMC00LTMtNy02LjUtN1MwIDExIDAgMTVoMTN6Ii8+PC9nPjwvc3ZnPg==);
  background-repeat: no-repeat;
  content: '';
  display: block;
  height: 16px;
  left: 0;
  position: absolute;
  width: 16px; }

</style>

这是标记:

<form _ngcontent-xtv-3="" action="" method="post" class="ng-untouched ng-pristine ng-valid">
    <input _ngcontent-xtv-3="" class="signUp-userInput" id="username" placeholder="Enter your email address" type="text">
    <input _ngcontent-xtv-3="" class="signUp-passInput" id="password" placeholder="Create a password" type="password">
    <button _ngcontent-xtv-3="" type="submit">Sign Up</button>
</form>

1 个答案:

答案 0 :(得分:2)

伪元素解析contentinput无法拥有内容的元素,也就是说,它不能托管其他元素甚至文本节点。这意味着您无法在:before元素上使用:afterinput

我建议您将每个input元素包装在label中,然后将:before个样式应用到该元素中。