Search code examples
cssfontspolymerpolymer-1.0paper-elements

Polymer set paper-input font family

How do I set a different font-family for paper-input. When I inspect the element in chrome it seems to get the style from many classes. Not sure which one to override, also what does -0 mean in a class.

enter image description here

Solution

  • Paper Input's styling documentation delegates to its bundled Paper Input Container's styling documentation, but it still doesn't provide a way to overwrite the font styling.

    Fortunately, you can see which fonts it uses on paper-input-container.html source code and overwrite the global Material Design Typography at paper-styles/typography.html, but I think it's not encouraged to do so, hence they didn't brought it as a customizable style.

    The corresponding style for the screenshot you took is the following:

    paper-input-container.html:

      .input-content ::content input,
  .input-content ::content textarea,
  .input-content ::content iron-autogrow-textarea,
  .input-content ::content .paper-input-input {
    position: relative; /* to make a stacking context */
    outline: none;
    box-shadow: none;
    padding: 0;
    width: 100%;
    max-width: 100%;
    background: transparent;
    border: none;
    color: var(--paper-input-container-input-color, --primary-text-color);
    -webkit-appearance: none;
    text-align: inherit;
    @apply(--paper-font-subhead);
    @apply(--paper-input-container-input);
  }

    paper-styles/typography.html:

    --paper-font-common-base: {
  font-family: 'Roboto', 'Noto', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* [...] */

--paper-font-subhead: {
  @apply(--paper-font-common-base);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
};

    Anyway, the -0 prefix is just an index. If you have two polymer elements of the same type, it'll place a -0 prefix on the first one and a -1 prefix on the second one. I'm not sure, but I guess that they have been translated into the CSS selector by using updateStyles, since you can customize each one separately through JavaScript, so it helps to namespace each element individually while translating :root and ::content keywords.

    So, if you want to overwrite this specific element, I'd tell you to use the -0 prefix, otherwise utilize a more generic class or element to properly select in a general way.