How to change font-size of paper-input in Polymer 1.0

Question

In Polymer 1.0 I can easily change the font-size of the iron-input component with for example:

input {
   font-size: 24px;
}

If I use the iron-input component within a paper-input-container it does not work. If I use just the paper-input component it does not work as well. So, how do you do it? Thanks in advance.

Answer 1

I allow myself to elaborate on the correct answer since I had trouble understanding how the mixin concept work and how to apply the solution that can be used for many other things (changing the other attributes such as the font, the style..). The solution if I have the following paper-input in my element

<paper-input id="title" label="Note title"></paper-input>

is to have the following style in my element

<style>
  #title {
    --paper-input-container-input: {
      font-size: 24px;
    };
  }
</style>

I can also have the style define globally in an html file I import

<style is="custom-style">
  :root {
    --paper-input-container-input: {
      font-size: 24px;
    };
  }
</style>

Answer 2

You can do that by using the --paper-input-container-input mixin. You can use it on your own element or via <style is="custom-style">. Also don't forget those semicolons after every mixin.