Clever Geek Handbook

Polymeric - color floating paper mark

How can I change the color of a focused float in a polymer?

enter image description here

Thanks for answers.

+3


source to share


4 answers


The only way I managed to get around this issue was as follows:

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


Note how the document-decorator-decorator was to be printed [focused] / deep / twice

+2


source


You can also use main style to do this, if you don't want to use / deep / selectors it will look something like this (untested):



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


source


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

#myInput{
   --paper-input-container-focus-color: red;
}
+1


source


For information:

To change any label style or floating label inside paper entry 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;
  };
}
0


source






More articles:


All Articles