web-dev-qa-db-ja.com

Polymer 1.0で<paper-input>タグをスタイルする方法

Polymer 1.0で<paper-input>タグをどのようにスタイルしますか？

ラベルのテキストの色、下線の色、入力テキストの色を特にカスタムスタイルする方法、およびcustom-styleを使用してそれらにアクセスする方法を示すことができますか？

polymer-1.0
17
Jenish J

here にリストされているカスタムプロパティを変更することで、<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>

編集：

: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>
37
Mikael E. Wikner