如何在纸张输入聚合物中更改下划线边框

Question

我想更改Polymer中纸张输入的下划线边框，但我不知道该怎么做。有什么想法吗？

如果我检查组件，我想要更改的是背面颜色，但是在组件的类中编入索引。我应该创建一个queryselector吗？我怎么称呼那个班级？

感谢。

Answer 1

文档中提到paper-input的样式可以与paper-input-decorator类似。

要更改下划线，您需要使用新的CSS /deep/组合子。

<style shim-shadowdom>
  paper-input /deep/ .unfocused-underline {
    /* line color when the input is unfocused */
    background-color: green;
  }
  paper-input /deep/ .focused-underline {
    /* line color when the input is focused */
    background-color: orange;
  }
</style>

以下是jsbin的例子。

因为我在Polymer元素之外使用了样式标记，所以我还包含了shim-shadowdom属性。如果您的样式是在Polymer元素中定义的，那么您将不再需要它。