如何在Polymer 1.0中设置<paper-input>标签的样式

Question

如何<paper-input>在Polymer 1.0中设置标记的样式

您能否展示如何专门定制样式标签文本颜色,下划线颜色,输入文本颜色以及如何使用它们custom-style？

Answer 1

您可以<paper-input>通过更改此处列出的自定义属性来更改外观(已移动最新版本的信息 - 它适用于早于v1.1.21的版本).

这是一个例子:

<style is="custom-style">
:root {
        /* Label and underline color when the input is not focused */
        --paper-input-container-color: red;

        /* Label and underline color when the input is focused */
        --paper-input-container-focus-color: blue;

        /* Label and underline color when the input is invalid */
        --paper-input-container-invalid-color: green;

        /* Input foreground color */
        --paper-input-container-input-color: black;
}
</style>

编辑:

在:root选择用于定义适用于所有自定义元素自定义属性.您还可以定位特定元素,而不是:root:

<style is="custom-style">
    paper-input-container.my-class {
        --paper-input-container-color: red;
        --paper-input-container-focus-color: blue;
        --paper-input-container-invalid-color: green;
        --paper-input-container-input-color: black;
    }
</style>