3

How can i change color of focused floating label in polymer?

enter image description here

Thanks for answers.

4 Answers 4

2

The only way I was able to get around this issue was with this:

paper-input-decorator[focused] /deep/ .floating-label,
paper-input-decorator[focused] /deep/ .label-text {
/* floating label color when the input is focused */
color: orange !important;
}

Notice how it was necessary to type paper-input-decorator[focused] /deep/ twice

2

You could also use core-style to do this if you didn't want to use the /deep/ selectors, it would look something like this (untested):

<core-style id="paper-input-decorator">
  .floating-label, .label-text {
    color: orange;
  }
</core-style>
2

You can set the following polymer style variable: --paper-input-container-focus-color, for example

#myInput{
   --paper-input-container-focus-color: red;
}
1
  • this also changes the input bottom border unfortunately
    – dcts
    Apr 27, 2020 at 9:19
0

For an Information:

To change any style of a label or floating label inside the paper-input, use the code below.

paper-input {
  --paper-input-container-label: {
    color: red;
    font-size: 14px;
  };
  --paper-input-container-label-floating: {
    color: red;
    font-size: 14px;
  };
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.