html - 使用 Angular 6 在输入中单击后如何更改框阴影?
问题描述
我在我的项目中使用 angular 6 和材质,并且我有一个输入框。我希望在单击输入后更改框阴影,然后单击退出,这是我的代码:
.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);
}
我不知道如何获得输入的活动状态
解决方案
你可以做的是使用: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;
}
推荐阅读
- arrays - Rails更新从数组属性中删除数字?
- android - 如何在反应原生 0.62.0 上调试模拟器/设备中的 android 应用程序?
- pandas - ValueError: 形状 (636,) 的 c 不能作为 x 大小为 636、y 大小为 636 的颜色序列
- java - 使用 Gradle 自动生成 gRPC 存根文件时出现问题
- google-app-engine - Next JS 谷歌云应用引擎 SSL/HTTPS
- sharepoint - 使用 PnPjs 和 .pdfConversionUrl 在 Sharepoint Online 中将 PPTX 导出为 PDF
- git - Git stash -u 挂在特定的仓库上
- flutter - Flutter:如何防止在调试控制台中打印异常?
- android - 当 Android 需要内存并杀死您的应用程序时,如何保留数据?
- android - FlutterPluginBinding.flutterEngine 已弃用