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

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

Можете ли вы показать, как специально настроить стиль текста текста, цвет подчеркивания, цвет текста ввода и как получить доступ к ним с помощью custom-style?

Ответ 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>