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

Question

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

你能展示如何具体自定义标签文本颜色、下划线颜色、输入文本颜色的样式，以及如何使用 custom-style 访问它们吗？ ？

Answer 1

您可以更改 <paper-input> 的外观通过更改 here 中列出的自定义属性(最新版本的信息已被移动 - 它适用于 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>