Cómo diseñar una etiqueta<paper-input> en Polymer 1.0

polymer-1.0

Question

¿Cómo diseñas la etiqueta <paper-input> en Polymer 1.0?

¿Puede mostrar cómo personalizar específicamente el color del texto de la etiqueta, el color de subrayado, el color del texto de entrada y cómo acceder a ellos utilizando custom-style ?

Answer 1

Puede cambiar la apariencia de <paper-input> cambiando las propiedades personalizadas enumeradas here (la información se ha movido a la versión más reciente; está disponible para versiones anteriores a la v1.1.21).

Aquí hay un ejemplo:

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

EDITAR:

El selector de :root se utiliza para definir propiedades personalizadas que se aplican a todos los elementos personalizados . También puedes apuntar a un elemento específico en lugar de :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>