Question

尝试设置聚合物纸张输入元素的字体大小样式，但这仅调整输入的输入字体大小。它不会调整占位符文本的大小。

Answer 1

如果您明确使用<paper-input>.placeholder属性（例如<paper-input label="Label" placeholder="Placeholder">），则占位符的字体大小与输入文本的字体大小相匹配，因此＆＃ 39;配置了--paper-input-container-input自定义属性：

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

＆＃13;

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

＆＃13;

如果您单独使用<paper-input>.label（即未设置<paper-input>.placeholder），则该标签也会作为输入的占位符，因此需要三个自定义属性得到预期的效果：

--paper-input-container-label调整标签大小
--paper-input-container-input调整输入文字的大小以匹配标签的大小
--paper-input-container展开容器以适应内部输入和标签

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

＆＃13;

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

＆＃13;

demo

如何在聚合物纸张输入中设置占位符的字体大小？

1 个答案: