如何在 Polymer 1.0 中设置 <paper-input> 标签的样式
How to style a <paper-input> tag in Polymer 1.0
如何在 Polymer 1.0 中设置 <paper-input>
标签的样式
您能否展示如何具体自定义标签文本颜色、下划线颜色、输入文本颜色的样式,以及如何使用 custom-style
访问它们?
您可以通过更改 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>
如何在 Polymer 1.0 中设置 <paper-input>
标签的样式
您能否展示如何具体自定义标签文本颜色、下划线颜色、输入文本颜色的样式,以及如何使用 custom-style
访问它们?
您可以通过更改 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>