Question

是否可以渲染Polymer输入字段看起来更像是标准的html文本输入字段而不是下划线的文本字段的（不幸的设计选择）？我用google搜索，但令人惊讶的是找不到任何讨论如何实现这一点的例子。

价： https://elements.polymer-project.org/elements/paper-input?active=paper-input-container#styling

我没有看到＆＃34;背景色＆＃34;设置。＆＃34;容器＆＃34;总是被称为＆＃34;下划线＆＃34;。

更新

我可以通过将纸张输入纸卡的孩子来实现这种效果;制作卡片的背景，白色;然后将卡的大小调整到输入字段。由于纸质卡具有明显的阴影效果，因此该字段应以与标准html输入字段类似的方式弹出，但将符合框架所期望的样式和外观。

Answer 1

您链接的documentation列出了可用的自定义属性和mixin，它们确实可以对样式进行细粒度控制，包括background-color和underline。它没有明确地列出background-color或任何其他CSS，因为您可以在您提供的custom CSS mixin中设置它，如Polymer docs所述，其中指出：

元素作者预测每个可能对主题很重要的CSS属性可能是乏味的（或不可能的），更不用说单独公开每个属性了。

要更改内部输入的背景颜色，您可以将--paper-input-container-input CSS属性设置为包含background-color的自定义mixin：

paper-input {
  --paper-input-container-input: {
    background-color: rgba(0,0,0,0.1);
  }
}

＆＃13;

HTMLImports.whenReady(() => {
  Polymer({ is: 'x-foo' });
});

＆＃13;

<head>
  <base href="https://polygit.org/polymer+1.6.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-input/paper-input.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        paper-input.gray {
          --paper-input-container-input: {
            background-color: rgba(0,0,0,0.1);
          }
        }
      </style>

      <paper-input class="gray" label="Inner Gray Background"></paper-input>
    </template>
  </dom-module>
</body>

＆＃13;

要隐藏3种可能状态下的下划线（默认，焦点和禁用），您需要将相应的--paper-input-container-underline设置为包含display: none的mixin：

paper-input {
  --paper-input-container-underline: {
    display: none
  }
  --paper-input-container-underline-focus: {
    display: none
  }
  --paper-input-container-underline-disabled: {
    display: none
  }
}

＆＃13;

HTMLImports.whenReady(() => {
  Polymer({ is: 'x-foo' });
});

＆＃13;

<head>
  <base href="https://polygit.org/polymer+1.6.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="paper-input/paper-input.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <style>
        paper-input.no-underline {        
          /* hide underline in all states */
          --paper-input-container-underline: {
            display: none
          }
          --paper-input-container-underline-focus: {
            display: none
          }
          --paper-input-container-underline-disabled: {
            display: none
          }
        }
      </style>

      <paper-input class="no-underline" label="No Underline"></paper-input>
    </template>
  </dom-module>
</body>

＆＃13;

codepen

聚合物输入字段 - 可能看起来更像std html输入字段？

1 个答案: