polymer-1.0

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



polymer-1.0 (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>

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