僞元素「：」之後「或」：之前「不在angular2應用上呈現

我們有一個帶有節點的angular2 web應用，我們使用webpack將所有東西捆綁起來。僞元素「：」之後「或」：之前「不在angular2應用上呈現

問題是，在這個過程中的某個地方，即使我們爲這些僞元素添加類，它們也不會出現在DOM中，它們不會被渲染。我們的應用程序將直接將樣式注入到腳本標記中，並添加ids以將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>

來源

2016-11-23 Fabio

嘗試「::之前」，而不是「之前」 –

已經嘗試過，但似乎沒有工作:( – Fabio

：之前並不打算用於替換元素，如表單元素（輸入）和圖像換句話說，純粹的CSS是不可能的，你想達到什麼目的？ –

僞元素工作過content。 input是不能具有的內容，也就是說，它不能夠主機其他元素甚至文本節點。這意味着您不能在input元素上使用:before或:after。

我建議你將每個input元素包裝在label中，並將:before樣式應用於該元素。

來源

2016-11-23 10:20:04 connexo

是的，這是確切的問題。最後，我們嘗試了另一種方法爲每個樣式設計一個標籤元素，它可以得到一個僞元素，謝謝！ – Fabio

僞元素「：」之後「或」：之前「不在angular2應用上呈現

回答

相關問題