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
?