How to configure paper-input-container (polymer mixin) style outside of custom component?

Question

We are trying to turn off paper input container style so that we can have all around border for input box and no animation on focus.

In custom polymer component, we were able to get what we want by disable the following mixin in custom polymer component style section:

--paper-input-container-underline
--paper-input-container-underline-focused

However, when copying the same style section out onto html and use paper-input-container, it is not taking. Is there a way to apply these mixin outside of custom polymer component? I am guessing my css syntax is wrong.

<style>
    paper-input-container{
        --paper-input-container-underline: {visibility: hidden};
        --paper-input-container-underline-focused: {visibility: hidden};
    }
</style>

thanks!

tony19 tony19 · Accepted Answer · 2016-11-03T20:11:04

I assume you meant you moved the style into index.html...

First, CSS mixins and properties from index.html are only applied in Polymer when they're in custom-styles:

<style is="custom-style">
  ...
</style>

Second, your CSS selector needs to be adjusted to target the paper-input-container, as paper-input-container alone won't work. If you want to target only paper-input-containers in x-foo elements, then you'd write:

x-foo {
  --paper-input-container-underline: {visibility: hidden};
  --paper-input-container-underline-focused: {visibility: hidden};
}

codepen

Or if you want to target all paper-input-containers in any element, you'd use :root (deprecated) or html as your selector:

html {
  --paper-input-container-underline: {visibility: hidden};
  --paper-input-container-underline-focused: {visibility: hidden};
}

codepen

How to configure paper-input-container (polymer mixin) style outside of custom component?

1 Answers