聚合物输入字段 - 可能使看起来更像标准 html 输入字段？答案

【问题标题】：Polymer Input Field - Possible to make look more like std html input field?聚合物输入字段 - 可能使看起来更像标准 html 输入字段？
【发布时间】：2016-08-28 04:27:47
【问题描述】：

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

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

我没有看到“背景颜色”设置。 “容器”总是被称为“下划线”。

更新：

我大概可以通过将纸质输入作为纸质卡片的子元素来实现该效果；将卡片的背景设为白色；然后将卡片调整到输入字段的大小。由于纸卡具有锐利的阴影效果，因此该字段应该以与标准 html 输入字段类似的方式弹出，但将符合框架预期的样式和外观。

【问题讨论】：

iron-input 没有样式 elements.polymer-project.org/elements/iron-input

标签： polymer polymer-1.0

【解决方案1】：

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

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

要更改内部输入的背景颜色，您可以将 --paper-input-container-input CSS 属性设置为自定义 mixin，其中包含 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 的 mixin：

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

【讨论】：

看看我在问题中的“更新”。我会将这个出色的答案标记为答案，但如果您想评论我的更新，那也很好。我认为对于输入字段，这肯定比仅仅更改输入的 BG 颜色更好。 PS。我是聚合物新手，并且对使用客户端 CSS/JS 的东西总是反应不佳——我是一名后端 Java 开发人员（这是我最熟悉的地方）。
我会说你描述的更新听起来像一个黑客;）。澄清一下，您是否希望微调 paper-input 的样式（保留大部分样式）？还是要删除除阴影之外的所有样式？如果是后者，您是否尝试过 Jonas 的 iron-input 建议？