Как создать тег <paper-input> в Polymer 1.0

Ответ 1

Вы можете изменить внешний вид <paper-input>, изменив пользовательские свойства, перечисленные выше здесь (информация была перенесена для самой последней версии - он доступен для версий старше v1.1.21).

Вот пример:

<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 используется для определения настраиваемых свойств, применимых ко всем пользовательским элементам. Вы также можете настроить таргетинг на определенный элемент вместо :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>