Question

我正在尝试自定义禁用的纸张输入元素。我想删除虚线并更改标签颜色。

有什么建议吗？

这是我试图设计的元素：

<paper-input ui:field="totalLabel" label="Total to repay" always-float-label="true" disabled="true">
    <div prefix="true">£ </div>
</paper-input>

谢谢！

Answer 1

paper-input-container为用户定义了一组自定义CSS mixins，以覆盖默认样式。

您可以在此处详细了解如何应用自定义CSS mixins：https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins

--paper-input-container-underline-disabled可用于更新已禁用的下划线。 https://github.com/PolymerElements/paper-input/blob/v1.1.5/paper-input-container.html#L166

--paper-input-container-disabled可用于更新已禁用容器的常规样式。 https://github.com/PolymerElements/paper-input/blob/v1.1.5/paper-input-container.html#L110

要删除下划线，您可以在自定义样式中编写如下内容。最好根据类名或id名使用不同的选择器。我使用了元素名称。

paper-input {
  --paper-input-container-underline-disabled: {
    border-bottom: none;
  };
}

Answer 2

您可以使用它禁用下划线

paper-input{
/* for disable initially*/
--paper-input-container-underline: {
      display: none;
    };
/* for disable on focus*/
    --paper-input-container-underline-focus: {
      display: none;
    };

/* for disable on input-disable*/
    --paper-input-container-underline-disabled: {
      display: none;
    };
}

聚合物 - 纸张输入

2 个答案: