实现-更改输入字段的默认颜色

Question

我是Materialise和Angular的新手。我有与此线程Change the default color of materialize.css input fields. I have attached screenshot

中的问题完全相同的问题

但是，解决方案无法回答问题。我在styles.css中实现了这段代码：

input:focus {
    border-bottom: 1px solid #005DAB !important;
    box-shadow: 0 1px 0 0 #005DAB;
 }

label:active {
    color: #005DAB;
  }

这就是我所看到的：

我看到的是底部边框变为蓝色（这是我想要的）。但是，标签暂时变为蓝色（我假设它处于活动状态），然后又回到蓝绿色。

如何使所选标签保持蓝色（＃005DAB）。

Answer 1

嘿，这里的问题是，默认的实现CSS规则超过了您定义的自定义规则。

您可以在这里阅读更多有关此的内容： https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

简而言之，最具体的规则会覆盖另一个规则，因此，要使您的更改显示出来，您需要使规则更具体。

有多种解决方法，例如在选择器中使用ID或在规则中添加！important。

但是不建议您使用这些方法，您可以重写原始CSS规则或添加自定义类以增加选择器的权重

<div class="input-field col s12 label-color-alternate">
     <input id="password" type="password" class="validate">
     <label for="password" class="">Password</label>
</div>

例如，我在外部div中添加了一个“ label-color-alternate”类，如果将此类添加到选择器中，它将为我们提供必要的特异性。

div.row > div.input-field.label-color-alternate > input+label.active {
    color: #005DAB;
}

您当然可以尝试使用最佳方法编写选择器，并向其添加自定义类的元素。

我希望这会有所帮助！

Answer 2

在您的外部CSS中进行设置：

print(cont['usuario']["denominacion"])