html - 聚合物 - 纸张输入浮动标签颜色

Question

如何更改聚合物中聚焦浮动标签的颜色？

感谢您的回答。

Answer 1

我能够解决这个问题的唯一方法是：

paper-input-decorator[focused] /deep/ .floating-label,
paper-input-decorator[focused] /deep/ .label-text {
/* floating label color when the input is focused */
color: orange !important;
}

注意输入 paper-input-decorator[focused] /deep/ 两次的必要性

Answer 2

如果您不想使用 /deep/ 选择器，也可以使用 core-style 来执行此操作，它看起来像这样（未经测试）：

<core-style id="paper-input-decorator">
  .floating-label, .label-text {
    color: orange;
  }
</core-style>

Answer 3

您可以设置以下聚合物样式变量：--paper-input-container-focus-color，例如

#myInput{
   --paper-input-container-focus-color: red;
}

Answer 4

信息：

要更改paper-input中标签或浮动标签的任何样式，请使用以下代码。

paper-input {
  --paper-input-container-label: {
    color: red;
    font-size: 14px;
  };
  --paper-input-container-label-floating: {
    color: red;
    font-size: 14px;
  };
}