Polymer 输入字段 - 可以使外观更像 std html 输入字段吗？

Question

是否可以将 Polymer 输入字段呈现为更像标准 html 文本输入字段而不是带下划线的文本字段（不幸的设计选择）？我已经用谷歌搜索了，但令人惊讶的是找不到任何讨论如何实现这一点的内容，以及示例。

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

我没有看到 "background-color" 设置。 "container" 总是被称为 "underline"。

更新：

我可能可以通过将 paper-input 作为 paper-card 的子对象来实现效果；将卡片的背景设为白色；然后将卡的大小调整到输入字段。由于纸卡具有明显的阴影效果，该字段应以与标准 html 输入字段类似的方式弹出，但会符合框架预期的样式和外观。

Answer 1

您提供的 documentation you linked to lists the available custom properties and mixins that would indeed allow fine-grain control of the styling, including background-color and the underline. It doesn't explicitly list background-color or any other CSS because you'd be able to set that within the custom CSS mixin，如 Polymer 文档所述，其中注释：

It may be tedious (or impossible) for an element author to predict every CSS property that may be important for theming, let alone expose every property individually.

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

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

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

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

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

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

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

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

codepen

Polymer 输入字段 - 可以使外观更像 std html 输入字段吗？

Polymer Input Field - Possible to make look more like std html input field?

polymer

polymer-1.0