How do you set the font-size of the placeholder in polymer paper-input?

Tried setting the font-size style for the polymer paper-input element, but this only resizes the font of the input that is entered. It does not resize the placeholder text.

Solution

If you're explicitly using the <paper-input>.placeholder property (e.g., <paper-input label="Label" placeholder="Placeholder">), the placeholder's font size matches the input text's font size, so it's configured with the --paper-input-container-input custom property:

/* <paper-input class="big-placeholder" label="Label" placeholder="Placeholder"> */
.big-placeholder {
  --paper-input-container-input: {
    font-size: 40px;
  };
}

<head>
      <base href="https://polygit.org/polymer+1.11.3/components/">
      <script src="webcomponentsjs/webcomponents-lite.js"></script>
      <link rel="import" href="paper-input/paper-input.html">
    </head>
    <body>
      <x-foo></x-foo>

      <dom-module id="x-foo">
        <template>
          <style>
            .big-placeholder {
              --paper-input-container-input: {
                font-size: 40px;
              };
            }
          </style>
          <paper-input class="big-placeholder" label="Label" placeholder="Placeholder"></paper-input>
        </template>
        <script>
          HTMLImports.whenReady(() => {
            Polymer({ is: 'x-foo' });
          });
        </script>
      </dom-module>
    </body>

If you're otherwise using <paper-input>.label alone (i.e., <paper-input>.placeholder is not set), the label also serves as the input's placeholder, so three custom properties are needed to get the desired effect:

--paper-input-container-label to size the label
--paper-input-container-input to size the input text to match the label's size
--paper-input-container to expand the container to fit the larger font size of the inner input and label

/* <paper-input class="big-label" label="Label"> */
.big-label {
  --paper-input-container-label: {
    font-size: 40px;
    line-height: 44px;
  };
  --paper-input-container-input: {
    font-size: 40px;
  };
  --paper-input-container: {
    line-height: 44px;
  };
}

<head>
  <base href="https://polygit.org/polymer+1.11.3/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="paper-input/paper-input.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        .big-label {
          --paper-input-container-label: {
            font-size: 40px;
            line-height: 44px;
          };
          --paper-input-container-input: {
            font-size: 40px;
          };
          --paper-input-container: {
            line-height: 44px;
          };
        }
      </style>
      <paper-input class="big-label" label="Label as Placeholder"></paper-input>
    </template>
    <script>
      HTMLImports.whenReady(() => {
        Polymer({ is: 'x-foo' });
      });
    </script>
  </dom-module>
</body>

demo