如何更改纸张输入 Polymer 中的下划线边框

Question

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

如果我检查组件，我想更改的是背景颜色，但在组件的 classes 中进行了索引。我应该做一个查询选择器吗？我怎么称呼它 class?

谢谢。

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 元素内定义的，则不需要它。

如何更改纸张输入 Polymer 中的下划线边框

How to change underline border in paper input Polymer

html

javascript

css

polymer