Altering the case of paper-input element

Question

I have the following paper-input element

      <paper-input floatinglabel required
        id="size-ppr-input"
        label="Size">
      </paper-input>

      <paper-icon-button floatinglabel required
        id="size-ppr-input"
        label="Size">
      </paper-icon-button>

The default font of the label for elemeent is uppercase as determined by paper-element core, and black (usually).

How can I change the case to lower, or sentence case etc and alter the colour.

Thanks

Answer 1

You can set the color of the label with

  paper-input /deep/ #label, paper-input /deep/ div#floatedLabel.focused {
    color: green;
  }

The first part is for the label when the input doesn't have the focus.
The second is for the floating label.

If you add this style outside of a polymer-element (on the entry page or a css file linked by the entry page) don't forget to add the selectors for browser that don't support shadow DOM

  paper-input /deep/ #label, paper-input /deep/ div#floatedLabel.focused,
  paper-input #label, paper-input div#floatedLabel.focused {
    color: green;
  }

To reset the all-caps font to normal font for paper-icon-button use

  paper-icon-button {
    text-transform: none;
  }