如何设置< paper-input>的样式在Polymer 1.0中标记 [英] How to style a <paper-input> tag in Polymer 1.0
问题描述
如何在Polymer 1.0中设置<paper-input>
标签的样式
How do you style the <paper-input>
tag in Polymer 1.0
您能显示如何专门自定义样式的标签文本颜色,下划线颜色,输入文本颜色以及如何使用custom-style
进行访问吗?
Can you show how to specifically custom style the label text color, the underline color, input text color, and how to access them using custom-style
?
推荐答案
You can change the appearance of <paper-input>
by changing the custom properties listed over here (The information has been moved for the most recent version - it is available for versions older than 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
:
The :root
selector is used to define custom properties that apply to all custom elements. You can also target a specific element instead of :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>
这篇关于如何设置< paper-input>的样式在Polymer 1.0中标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!