angular - 如何在mat-input中设置占位符的位置
问题描述
我正在更改我的垫子输入中的一些样式。除了输入中占位符的位置之外,我得到了所有这些。
<mat-form-field>
<input matInput type="email" name="email" [required]="true" placeholder="email" class="my-class"/>
</mat-form-field>
.my-class {
padding: 10px;
box-sizing: border-box;
}
当输入中有一封电子邮件时,这可以正常工作,但是当它为空时,占位符“电子邮件”会在输入中移动并位于顶角。
通过检查 css,我发现在 mat-form-field 中添加和删除了一个类,它是“mat-form-field-sould-float”,我的选择器将类似于:
mat-form-field:not(.mat-form-field-should-float) .mat-input-placeholder
但我无法让它发挥作用。
我怎样才能改变它?
解决方案
由于视图封装,您将无法在组件的样式表中更改输入的 CSS。
您将不得不style.scss
在项目的根部进行更改。您可以使用相同的选择器:
mat-form-field:not(.mat-form-field-should-float) .mat-input-placeholder {
padding: 10px;
box-sizing: border-box;
}
推荐阅读
- python - 通过过滤列获取值
- web-scraping - Google 电子表格 Importxml 不适用
- flutter - 具有灵活高度和可滚动内容的对话框
- java - 数据库引用问题导致 Hibernate 中的故障安全清理循环
- sql - 当 count(*) 为空时返回 0
- ios - 适用于 iOS 和 Safari 的 FairPlay DRM 配置(无法加载视频)
- javascript - 服务器请求卡在等待中
- angular - 当我从 tab1 的子页面跳转到 tab2 的子页面时,离子后退按钮不带我到上一页
- android - 我是否需要在自定义视图中清除/清空我的视图绑定字段?
- javascript - 循环遍历数组,计算平均值,并在对象中返回结果