Search code examples
csspolymerpolymer-1.0

Change paper-input error color dynamically

I have a paper-input element which is colored red when the input is empty to mark an error has happened, but I want this same element to be orange when the user enter an invalid string to make it look like a warning.

I know I can change the color using the predefined properties like this:

paper-input {
  --paper-input-container-invalid-color: orange;
}

But this coloring is applied to any error/invalid state.

Is there a way to change this color dynamically depending on the error type?

Solution

  • I found a way to do it, using updateStyles function of Polymer:

    Polymer.updateStyles({'--paper-input-container-invalid-color': 'new_color'});