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

Question

我想更改聚合物纸张输入中的下划线边框，但我不知道如何去做。任何想法？

如果我检查组件，我想要改变的是背景颜色，但是在组件的类内索引。我应该做一个查询选择器吗？我怎么称呼那个班？

谢谢。

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元素中定义的，你不需要这个。