How to style a tag in Polymer 1.0

Question

How do you style the <paper-input> tag in Polymer 1.0

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?

[This](https://www.youtube.com/watch?v=omASiF85JzI) video from the Polycasts series is an introduction to theming elements. — Ben Thomas, Jun 04 '15 at 15:50

score 37 · Accepted Answer · edited Mar 10 '17 at 21:37

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).

Here's an example:

<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>

EDIT:

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>

Nice. This works well. What's the best practice around organizing this? Do you put this in a separate file and use an HTML import? Also, what does the `:root` signify? Can that be changed to something else? For example, associate it to a specific class or id? Thanks! — Con Antonakos, Jun 14 '15 at 01:25
@ConAntonakos You can put this in a separate file. `:root` selector is used to define custom properties that apply to all custom elements. You can target a specific element, e.g., `paper-input.my-class { ... }`, instead of `root:`. See https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-style — Frederik Krautwald, Jul 02 '15 at 13:40

How to style a tag in Polymer 1.0

1 Answers1

Linked

Related