How to style a tag in Polymer 1.0

Question

How do you style the tag in Polymer 1.0

Can you show how to specifically custom style the label text color, the underline color, inp

Answer 1

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>