在mat-Input区域聚焦时如何改变mat-icon的颜色？

在mat-Input区域聚焦时，可以通过CSS样式来改变mat-icon的颜色。可以使用Angular Material提供的伪类选择器:focus来选择聚焦状态下的mat-Input，并通过CSS选择器来选择其内部的mat-icon元素，然后设置其颜色属性即可。

以下是一个示例的CSS样式代码：

.mat-input-element:focus + .mat-icon {
  color: red; /* 设置聚焦时mat-icon的颜色为红色 */
}

在上述代码中，.mat-input-element是mat-Input元素的类名，.mat-icon是mat-icon元素的类名。通过+选择器选择紧邻.mat-input-element元素后的.mat-icon元素，然后设置其颜色属性为所需的颜色。

这样，在mat-Input区域聚焦时，mat-icon的颜色就会改变为红色。你可以根据需要修改颜色值或者使用其他CSS属性来改变mat-icon的样式。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）

产品介绍链接地址：https://cloud.tencent.com/product/cvm

在mat-Input区域聚焦时如何改变mat-icon的颜色？

html、css、angular-material

我正在使用mat-form-field和mat-icon，我希望当我在mat-form-field(mat-Input field)内单击或聚焦时，mat-icon颜色应该改变，而焦点输出mat-icon保持原来的颜色。

浏览 13提问于2019-04-02得票数 0

回答已采纳

1回答

角度变化焦点颜色内垫标签-形状场

html、css、angular、angular-material

就像第二个例子：一样，我在垫子表单字段中有一个垫片列表。当点击内部，垫子标签和边框底部(我认为它的边界底部)得到聚焦，并改变颜色。我如何修改这种颜色？默认是一个角度的主题颜色，但我想改变这个。fruit of fruits" (removed)="remove(fruit)"> <button matChipRemove&

浏览 10提问于2022-06-06得票数 0

2回答

Mat表单域颜色更改

angular、angular8、angular9

我正在工作的角度应用程序，我有类似的问题提到在以下两个链接但是在两个链接上建议的解决方案都不起作用。有没有人知道更好的解决方案？

浏览 0提问于2020-09-09得票数 0

2回答

如何在聚焦时改变终端的颜色

visual-studio-code

当集成终端(windows )聚焦/活动时，是否有改变其颜色的方法？我使用ctrl+l在终端和工作空间之间进行更改，但有时我在判断哪个区域是活动区域时遇到问题。

浏览 1提问于2017-09-08得票数 5

回答已采纳

1回答

当我:焦点是图标改变颜色时，我需要输入

html、css、frontend

当我:焦点是图标改变颜色时，我需要输入 <form action=""> <div>

浏览 2提问于2022-12-01得票数 0

1回答

改变EditText的焦点颜色？

android、themes

当聚焦时，我如何改变EditText的颜色？在模拟器中，聚焦时它是蓝色的，我看不到从XML布局或以编程方式更改它的方法。我不知道如何改变其他视图的焦点颜色，就像按钮和纺纱机一样。

浏览 1提问于2013-01-14得票数 4

1回答

如何跟踪当前选择哪个图标，而不是一次选择多个图标

html、css、angular

因此，我试图只选择一个图标，我需要在.ts文件中重写我的函数，这样它可以确保当选择一个图标时，只有该图标改变颜色，而其他图标在default.If时，我只选择home图标更改颜色，如果我选择更多，那么主页图标就会恢复到默认状态，而更多的图标会改变。现在，如果我选择一个又一个图标，它们都会改变颜色，除非我刷新。有什么帮助吗？" (click)="goToProfile()"

浏览 1提问于2019-03-15得票数 0

回答已采纳

2回答

在悬停时更改自定义图标组件的颜色

html、css、angular、sass

下面的HTML标记创建一个图标：这个组件本质上只是一个材料图标标签的包装。现在，我在我的父组件中使用这个图标组件。当悬停在这个图标之上时，我想改变它的颜色。为此，我刚刚在我的父组件中创建了一些SCSS： &:hover {

浏览 3提问于2022-07-02得票数 0

2回答

如何用angular正确地改变垫子图标的颜色？

angular、angular-material

我已经查看了文档，并尝试像这样更改垫子图标的颜色：上面是元素在html中的外观。我尝试通过添加一个白色的类来更改图标的颜色

浏览 7提问于2018-04-13得票数 18

1回答

如何改变角中单一元素的颜色

angular、angular-material

我在列表中呈现了按钮。当我点击它们时，我想改变它们的颜色。但是当我点击它时，它会改变列表中所有按钮的颜色。但我只想更改单个按钮图标。这是我的html <button mat-mini-fab (click)='green' :

浏览 4提问于2020-05-17得票数 2

回答已采纳

1回答

Angular2+材料菜单不像菜单

angular、menu、angular-material2

我正在使用标准的Angular2材料菜单结构来创建一个打开子菜单的顶部条菜单项，如我的项目中下面的代码： <button mat-menu-item> <span>A

浏览 0提问于2018-03-14得票数 2

回答已采纳

1回答

文本区域:不透明的焦点不起作用

html、css

在我的项目中，我想要一张图片，当我悬停它时，我想要一个文本区域与一些文本一起出现。这部分工作得很好。我可以有文本区域:聚焦工作，因为我可以使它很容易改变背景颜色。这里是JS向大家展示的：<div

浏览 5提问于2014-05-24得票数 0

回答已采纳

1回答

在角度垫上设置渐变颜色-图标

angular、angular-material

如何在mat-icon Angular上设置渐变颜色？我可以在css中设置颜色，例如红色、绿色或任何其他纯色，如mat-icon { color: red; }。但是，当尝试设置为像mat-icon {linear-gradient(to right, xxxxxx, #xxxxxx);}这样的渐变颜色时，它没有任何效果。谢谢：)

浏览 3提问于2020-12-07得票数 0

2回答

点击时如何修改TextField的高亮颜色？(颤动)

flutter、flutter-layout

我正试着在聚焦时改变我的labelText颜色。我可以更改文本颜色，但不能在聚焦时更改。在下面的截图中，字符串"Email“在聚焦时仍然是蓝色的。labelText: 'Email', Icons.check, ),), 这是按钮被按下之前<

浏览 2提问于2021-02-01得票数 0

3回答

如何使用setTextColor(ColorsStateList colors)设置TextColor？

android、textcolor

当状态改变(按下、聚焦)时，我需要更改文本颜色... 如何使用ColorsStateList设置TextView的文本颜色

浏览 8提问于2011-07-13得票数 49

回答已采纳

1回答

如何设置mat-form-field的聚焦边框颜色

angular、angular-material

这篇文章中被接受的答案Changing border color in mat-form-field介绍了如何改变mat-form-field的边框线颜色。我想知道当它被聚焦时，是否有一种方法可以改变边框颜色。important; } 有没有人能告诉我有没有办法改变聚焦边框的颜色？

浏览 38提问于2020-11-30得票数 1

回答已采纳

2回答

如何使用两个三元表达式分别设置mat-图标颜色和背景色？

html、angular

我有一个mat图标，我想成为一个特定的颜色，这取决于用户的URL (在布尔表达式中处理)。我使用了一个三元表达式来改变背景颜色，这很好，但是当我添加第二个三元表达式来改变图像/图标本身的颜色时，第一个表达式停止工作，而第二个表达式也不起作用。" routerLink="/announcements" mat-mini-fab matToolti

浏览 1提问于2019-08-05得票数 1

回答已采纳

1回答