How to hide disabled input underline style

Question

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

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?

Answer 1

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.