无法在Angular中使用CSS创建关闭按钮
无法在Angular中使用CSS创建关闭按钮
提问于 2018-08-03 23:26:50
请检查以下代码：
https://stackblitz.com/edit/angular-nuyfcq
我希望在选择一个文件时，会出现一个小的缩略图，上面有一个X符号。我只用HTML，CSS和JS就能让它工作(见https://codepen.io/manuchadha/pen/PBKYBJ)，但我不能让它在Angular中工作。
我的错误在哪里？
回答 1
Stack Overflow用户
发布于 2018-08-04 03:10:00
受到答案https://stackoverflow.com/questions/36265026/angular-2-innerhtml-styling的启发，如果我将我所有的类都改为:host >>> selector格式，那么它就可以工作了。我从类更改为选择器(例如，通过给a (a#close-button)一个id将close-cross-link改为选择器)
:host >>> a#close-button /*.close-cross-link*/ {
border: 1px solid black;
width: 100px;
height: 100px;
opacity: 0.3;
background-color:white;
position:relative;
top:-15px;
left:-15px;
/*border-radius:50%; /*makes a circle*/
}
:host >>> a#close-button:hover /*.close-cross-link:hover */{
opacity: 1;
}
:host >>> a#close-button:before, :host >>> a#close-button:after /*.close-cross-link:before, .close-cross-link:after*/ {
display:inline-block;/*need display+relative+left or absolute+left*/
position:relative;
left: 13px;
border: 1px solid black;
top:0px;
right:0px;
content: '';
height: 31px;
width: 2px;
background-color: #333;
border-radius:50%; /*makes cross sharper*/
}
:host >>> a#close-button:before /*.close-cross-link:before */{
transform: rotate(45deg);
}
:host >>> a#close-button:after /*.close-cross-link:after*/ {
transform: rotate(-45deg);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51675838
复制相关文章
相似问题