Search code examples
csspolymermaterial-designweb-component

Polymer 1.0 how can I style a paper-input:disabled?

Polymer 1.0 question:

When a paper-input is set to 'disabled', the text and underline turn to a really light gray that is hard to read. How can I set the text color using css. Here is what I have tried so far: 

--paper-input-container-input-disabled {
    color:black;
}

<paper-input label="Email" disabled></paper-input>

But it doesn't change the text color. Although I can change the background color using the same mixin.

Solution

  • The online document lists the name wrong. It should be --paper-input-container-disabled. So this would work -

    paper-input {
  --paper-input-container-disabled: {
    opacity: 0.66;
  };
}

    Note the default opacity is 0.33. So maybe increase it a bit to make it clearer.