Come stile di un tag <paper-input> in Polymer 1.0

Question

Come acconciare il tag <paper-input> in Polymer 1.0

Potete mostrare come specificamente personalizzati stile il colore etichetta di testo, il colore della sottolineatura, il colore del testo di input, e come accedervi utilizzando custom-style?

Answer 1

È possibile modificare l'aspetto di <paper-input> modificando le proprietà personalizzate elencate su here (le informazioni sono state spostate per la versione più recente - è disponibile per le versioni precedenti alla v1.1.21).

Ecco un esempio:

<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:

Il selettore :root viene utilizzata per definire custom properties that apply to all custom elements. È anche possibile indirizzare un elemento specifico anziché :root:

<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>