cssinputpolymerdisabled-inputtext-decorations

How to hide disabled input underline style

When styling an HTML element like paper-input and disabled a dotted underline style is added.

enter image description here

I can edit the disabled styles like

paper-input {
  --paper-input-container-disabled: {
    color: black;
    opacity: 1;
    text-decoration: none;
  };
}

But setting the text-decoration does not hide this style.

How can I set the CSS to hide this disabled underline style?

Solution

  • You can add the display: none property to remove the underline.

     <style is="custom-style">
      :root {
        --paper-input-container-underline: {
          display: none;
        };
      }
    </style>

    Try removing the root if It doesn't work for you.