Wie ein <paper-input> Tag in Polymer 1,0

Question

stylen, wie Sie die <paper-input> Tag in Polymer Stil do 1.0

Ihnen zeigen kann, wie man das Etikett Textfarbe, die Unterstreichungsfarbe, Eingabetextfarbe und wie speziell individuellen Style Zugriff auf sie mit custom-style?

Answer 1

Sie können die Darstellung von <paper-input> ändern, indem Sie die benutzerdefinierten Eigenschaften ändern, die über here aufgelistet sind (Die Informationen wurden für die neueste Version verschoben - sie ist für ältere Versionen als v1.1.21 verfügbar).

Hier ein Beispiel:

<style is="custom-style"> 
:root { 
     /* Label and underline color when the input is not focused */ 
     --paper-input-container-color: red; 

     /* Label and underline color when the input is focused */ 
     --paper-input-container-focus-color: blue; 

     /* Label and underline color when the input is invalid */ 
     --paper-input-container-invalid-color: green; 

     /* Input foreground color */ 
     --paper-input-container-input-color: black; 
} 
</style> 

EDIT:

:root Der Selektor verwendet wird custom properties that apply to all custom elements zu definieren. Sie können auch ein bestimmtes Element statt :root Ziel:

<style is="custom-style"> 
    paper-input-container.my-class { 
     --paper-input-container-color: red; 
     --paper-input-container-focus-color: blue; 
     --paper-input-container-invalid-color: green; 
     --paper-input-container-input-color: black; 
    } 
</style>