更改 mat-form-field 中的边框颜色

2024-05-27

我正在使用有角度的材料mat-form-field。我有深色背景,因此尝试将表单字段的边框更改为白色。但我无法使用 css 来实现它。不,无论我在 css 中进行什么更改,它们都不会反映到mat-form-field。这是我的代码的链接:

StackBlitz 链接到我的作品 https://stackblitz.com/edit/angular-nnzlr5

任何帮助将不胜感激。 谢谢。


我认为这将涵盖一切。

// mat-icon-stepper selected color change 
::ng-deep .mat-step-header .mat-step-icon-selected, .mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit {
    background-color: red!important;
}

//input outline color
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
    color: red!important;
    // opacity: 1!important;
}

//mat-input focused color
::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    color: red!important;
}

// mat-input error outline color
::ng-deep .mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick{
    color: red!important;
    opacity: 0.8!important;
}

// mat-input carent color
::ng-deep .mat-input-element {
    caret-color: red!important;
}

// mat-input error carent color
::ng-deep .mat-form-field-invalid .mat-input-element, .mat-warn .mat-input-element {
    caret-color: red!important;
}

// mat-label normal state style
::ng-deep .mat-form-field-label {
    color: rgba(0,0,0,.6)!important;
    // color: $mainColor!important;
}

// mat-label focused style
::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
    color: red!important;
}

// mat-label error style
::ng-deep .mat-form-field.mat-form-field-invalid .mat-form-field-label {
    color: red!important;
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

更改 mat-form-field 中的边框颜色 的相关文章

  • 两列表:一列尽可能小,另一列占据其余部分

    我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr
  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其
  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障?

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么
  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮
  • 有谁知道在 Angular 2 应用程序中使用的简单日期选择器?

    有谁知道在 Angular 2 应用程序中使用的简单日期选择器 我似乎无法让 jquery ui datepicker 工作 有谁知道一个容易实施的方法 我尝试过 html date 但它不适用于所有浏览器 我正在使用带有 html5 和
  • SVG 动画不适用于 Chrome 中的 favicon

    In the SVG 图标已设置 这是旋转内圆的SVG文件的内容 Favicon 动画在 Chrome 中根本不起作用 如何让它在 Chrome 中工作 在 Firefox 中可以正常工作 在 Edge 中则不行 但 Chrome 是最重要
  • jQuery 生成 div 和碰撞检测

    所以我的学校作业项目快要结束了 我只是错过了两件我似乎无法弄清楚的主要事情 1 如何生成具有随机位置的间隙的管道障碍物 以便鸟可以飞过 尝试使用一个函数来更改间隙位置的管道 div 的 css right attr 并在以下情况下移除管道它
  • 使用反增量更改 z-index

    我尝试制作一个图像滑块 当鼠标悬停在一个点上时 它将显示图片 我也尝试使用在图像之间切换z index但什么也没动 slider counter reset index 1000 slider input name slide switch
  • 只能通过bootstrap将服务注入到服务中吗?

    我正在尝试连接一个使用 Http 服务的基本 Angular2 应用程序 我见过的大多数教程都是通过Component消耗Http服务 这似乎是错误的 除非瘦控制器的基本理念已经改变 但这是一个不同的问题 我想创建一个使用 Angular
  • 指南针字体输出错误的字体文件路径

    font face font family HelveticaNeueLTStd Lt src url css fonts HelveticaNeueLTStd Lt otf format opentype 这是我的指南针代码的输出 inc
  • 当共享相同的行和列时,将网格项设置为不重叠

    现在 当两个网格项共享相同的行和列时 它们会相互重叠 div class some grid container div Item 1 div div Item 2 div div 我如何让它们不重叠 当共享相同的行和列时 其行为可能类似于
  • 使用 css 简单地将对象居中,无需修改

    我想使用 CSS 将对象居中 而不需要任何技巧 这可能吗 如何实现 我已经尝试过了 但是我的 p 标签消失了 centered position fixed top 50 left 50 有多种方法可以使元素居中 但这取决于您的元素是什么以
  • 为什么我不能在 Angular 模板中定义内联函数?还能怎样做呢?

    我正在使用 Angular 2 而且是新手 我想为单击按钮调用一个小函数 所以我尝试这样做 也许是因为我来自 React 背景
  • Angular:如何动态更改 scss 变量?

    我对 scss 很陌生 所以我想知道是否可以使用组件的 Typescript 来更改 scss 变量 所以考虑一下 html div div scss thememode theme1 textcolormode nonHover colo
  • 如何选择具有“A”类但不具有“B”类的 div?

    我有一些 div div class A Target div div class A B NotMyTarget div div class A C NotMyTarget div div class A D NotMyTarget di
  • CSS 类命名约定

    在网页上 有两个控件块 主要和次要 大多数人会使用什么类名 选择一 div class primary controls div
  • 使用 CSS 使一行 div 高度相同

    我有一排必须具有相同高度的 div 但我无法提前知道该高度可能是多少 内容来自外部源 我最初尝试将 div 放置在封闭的 div 中并将它们向左浮动 然后我将它们的高度设置为 100 但这没有明显的效果 通过将封闭 div 的高度设置为固定
  • CSS3 信封形状

    正如您可能已经猜到的 该图像是邮件信封形状的一部分 如果可能的话 我想使用 CSS3 创建该形状 我已经制作了其他部分 但这个很棘手 该形状需要两侧都有三角形切口和圆角 大概是 border radius bottom left borde
  • 在移动设备上滚动

    这个问题更多的是一个建议研究 我确实希望它对其他人有帮助 并且它不会关闭 因为我不太确定在哪里寻求有关此事的建议 在过去的 6 个月里 我一直在进行移动开发 我有机会处理各种设备上的各种情况和错误 最麻烦的是滚动问题 当涉及到在网站的多个区
  • 使用css bootstrap时如何仅向一列添加右边框?

    我正在尝试使用CSS引导框架 http getbootstrap com css tables在我的项目中 我正在使用带有以下类的表table table bordered table striped 我想删除除第一列之外的所有列的边框 这

随机推荐

  • 如何将 GWT 与 Visual Studio 一起使用来创建 ASP.NET 网站?

    如何将 GWT 与 Visual Studio 一起使用来创建 ASP NET 网站 如果可能 GWT 可以与任何后端一起使用 只需做一些工作 它开箱即用 使用 servlet 容器 但您不需要保留此容器 容器中的关键项是加载GWT编译代码
  • 更改可组合项的布局方向

    我想将特定可组合项的方向设置为RTL Composable fun ViewToBeChanged Row Image Column Text Title Text Subtitle 是否可以 喷气背包组成布局文档 https develo
  • 如何将html表单中的信息写入MySQL数据库

    好吧 我正在建立一个带有表单的网站 我想将用户在表单中输入的所有信息保存到我的 MySQL 数据库中 表单的编码如下
  • 最后块不设置java中变量的值

    我有下面的代码 public static void main String args TODO Auto generated method stub try System out println Hardik testFinnalyBlo
  • Python: Tkinter + MSS = mss.exception.ScreenShotError: XDefaultRootWindow() 失败

    在 Tkinter GUI 内部使用时 我遇到了 Python MSS 库的非常奇怪的行为 我有一个 Tkinter 窗口 其中有一个用于弹出顶级窗口的按钮 在该 TopLevel 窗口中 我有一个用于截取屏幕截图的按钮 使用 MSS 第一
  • 如何将 Azure 映像从一个区域复制到另一个区域

    我在 Azure 区域 加拿大中部 的 Azure 映像中有一个 系统准备 通用 服务器模板 我想使用它在不同的 Azure 区域 美国中部 创建 Azure VM 这不起作用 因此 我需要将该 Azure 映像也驻留在美国中部 如何将我的
  • Android:如何从 SubSettings 禁用左上角后退按钮

    从 Android Jellybeans 开始 设置 活动的所有子活动在左上角都有一个后退按钮 用于调用 设置 活动 它的行为更像是用于导航目的的 向上 按钮 我有 android 代码 我想在我的构建中禁用此按钮以执行一些子活动 例如显示
  • 如何退出bash中的所有调用脚本?

    假设我有以下脚本 a sh echo in a if test 1 ne 2 then echo oops exit 1 fi b sh echo in b a sh echo in b 2 运行 b sh 时 如果 a sh 退出 我希望
  • 带有未转义引号的Java CSV解析器[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • Array.function 和 Array.prototype.function 有什么区别?

    我发现有些功能像concat push every 两者都存在于Array and Array prototype 使用 Firefox 57 0 1 控制台 这很令人困惑 因为原型方法存在于Array 另外 静态方法 Array from
  • 如何使用CellTable进行单行扩展?

    我正在尝试使用新的 GWT CellTable 小部件 但我的表格需要支持单行扩展 即行的左侧有一个 zippy 单击它时 该行应该扩展以提供更多详细信息 并且该行应该跨越所有列 是否可以使用 CellTable 来实现此目的 如何动态添加
  • Clang 中所有 Objective-C 预处理器指令的列表

    Clang 中是否有所有 Objective C 预处理器指令的列表 我说的是 pragma mark Section I or pragma unused variableName or warning message 我想了解更多信息以
  • 预编译的 asp.net 网站中的 - 这重要吗?

    我正在 Visual Studio 2008 上使用 Web 部署项目部署一个预编译和全页面合并的网站 请注意 所有程序集和项目都已在发布模式下编译 我的所有页面都是在发布模式下预编译的 所以它们不会被重新编译 它们只会被运行时加载 在不需
  • jQuery 相当于 `return document.getElementById(theVar)'

    我有一个 JavaScript 函数 function m theVar return document getElementById theVar 上面代码的问题是 我想要传递的元素是由ajax生成的 所以我需要类似的东西 live 在
  • 为什么 shell=True 的 subprocess.Popen() 在 Linux 和 Windows 上的工作方式不同?

    使用时subprocess Popen args shell True 跑步 gcc version 仅作为示例 在 Windows 上我们得到 gt gt gt from subprocess import Popen gt gt gt
  • 如何将热图刻度标签映射到值并将这些值添加为图例

    我想在seaborn中创建一个热图 并且有一个很好的方式来查看标签 With ax figure tight layout 我正进入 状态 这显然很糟糕 Without ax figure tight layout 标签被裁剪 代码是 im
  • EF Core 创建多个外键列

    我将 EF Core 与 NET Core 3 1 结合使用 我有一个客户端 事件关系的简单示例 public class BaseEntity Key Required DatabaseGenerated DatabaseGenerate
  • 使用 Haskell 绘制图表

    是否可以使用 Haskell 绘制一个简单的图表 你们中的任何人都可以告诉我该怎么做吗 该图应至少包含 3 个点 Haskell 图表 https github com timbod7 haskell chart似乎不错 The wiki
  • 联系表 7 中的占位符 - Wordpress

    我正在为我的客户制作一个网站 但遇到了问题 我使用Contact Form 7在wordpress中制作了一个联系表单 这个插件确实很容易使用 但是当我想使用插件的占位符属性时 它在加载页面时没有显示占位符 这就是我在联系表 7 中设置占位
  • 更改 mat-form-field 中的边框颜色

    我正在使用有角度的材料mat form field 我有深色背景 因此尝试将表单字段的边框更改为白色 但我无法使用 css 来实现它 不 无论我在 css 中进行什么更改 它们都不会反映到mat form field 这是我的代码的链接 S