我在我的元素中使用了 angular 6 和 Material ,并且我有一个输入框。我希望在单击输入后和单击退出后更改框阴影,这是我的代码:
.html
<div class="search-bar" fxFlex>
<form class="search-form" fxShow="false" fxShow.gt-xs>
<mat-icon>search</mat-icon>
<input type="text" matInput (keyup)="applyFilter($event.target.value)" placeholder="Search" autofocus="true" />
</form>
</div>
.css
.search-bar .search-form {
background: rgba(255,255,255,1);
position: relative;
margin-right: 5px;
display: block;
width: 99.8%;
border: solid 1px rgba(119, 119, 119, .55);
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.08);
}
不知道如何获取input的active状态
最佳答案
你可以做的是使用 :focus
伪类:
input:focus form {
box-shadow: 0 2px 12px 0 rgba(0,0,0,0.16),0 0 0 1px rgba(0,0,0,0.08);
}
如果没有聚焦:
input:not(:focus) form {
box-shadow: none;
}
关于html - 使用angular 6单击输入后如何更改框阴影?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52250913/