聚合物 - 造型纸张输入元件答案

【问题标题】：Polymer - Styling paper-input element聚合物 - 造型纸张输入元件
【发布时间】：2015-12-15 14:03:54
【问题描述】：

我正在开发一个 Polymer 应用程序。我喜欢的太多了，还有一些我还没有完全理解的魔法。此时，我正在尝试弄清楚如何设置paper-input 元素的样式。我有一个这样定义的：

<div class="horizontal layout">
  <iron-icon icon="schedule" style="padding:18px 12px 0px 0px;"></iron-icon>
  <paper-input label="started at" readonly="true" value="[[ time ]]"></paper-input>
</div>

上面的代码生成了一个纸质输入元素。但是，我有两个挑战。首先，当用户单击文本字段的内容时，会出现下划线。但是，我将其标记为只读，因此我认为该字段无法获得焦点。其次，我不想要任何形式的下划线。即使该领域没有焦点。我从不想显示下划线。然而，当我检查 DOM 时，我不知道如何设置它。

有没有办法去掉下划线和焦点？如果有，怎么做？

【问题讨论】：

标签： css polymer

【解决方案1】：

您所说的下划线是paper-input 的材料设计规范的一部分。如果要删除它，则必须使用以下 mixins：

`--paper-input-container-underline` | Mixin applied to the underline | `{}`
`--paper-input-container-underline-focus` | Mixin applied to the underline when the input is focused | `{}`
`--paper-input-container-underline-disabled` | Mixin applied to the underline when the input is disabled | `{}`

【讨论】：