polymer-1.0 - 如何在Polymer 1.0中设置标签的样式

Question

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

您能否显示如何特别自定义样式的标签文本颜色，下划线颜色，输入文本颜色，以及如何使用custom-style访问它们？

Answer 1

您可以通过更改here上列出的自定义属性来更改<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选择器用于定义 custom properties that apply to all custom elements。您还可以定位特定元素而不是 :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>