Polymer - paper-input

Question

I am trying to customise a disabled paper-input element. I would like to remove the dashed lines and change the labels color.

Any suggestion?

This is the element I am trying to style:

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

Thanks!

Answer 1

paper-input-container has set of custom CSS mixins defined for users to override the default styles.

You can read more about how to apply custom CSS mixins here: https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins

--paper-input-container-underline-disabled can be used to update the disabled underline. https://github.com/PolymerElements/paper-input/blob/v1.1.5/paper-input-container.html#L166

--paper-input-container-disabled can be used to update the general styles of disabled container. https://github.com/PolymerElements/paper-input/blob/v1.1.5/paper-input-container.html#L110

To remove underline you can write something like below in the custom styles. Its better to use different selector based on class name or id name. I have used the element name.

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