Unable to style paper-input's input placeholder.

[amarsiingh]

Description

I've a requirement wherein, the input text needs to be UPPERCASE. So I've used --paper-input-container-shared-input-style to style text using text-transform. However, this causes the placeholder text to be UPPERCASE'd as well, which is not desirable.

So far, I've tried using ::placeholder pseudo element and classes to lowercase the placeholder text. However that sort of overrides the text transformation applied to input text as well and doesn't apply the UPPERCASE to input text.

Is there any way I can style the placeholder text properly?

Expected outcome

paper-input element should provide a mixin or a way for styling 'placeholder' text.

Actual outcome

paper-input element doesn't provide a mixin or a way to style 'placeholder' text. Moreover, the ::placeholder pseudo element and classes breaks the styling applied to input.

Live Demo

Steps to reproduce

1. Create 2 instances of paper-input element.
2. Style input within paper-input element using --paper-input-container-shared-input-style as text-transform: uppercase;
3. Include input::placeholder { text-transform: lowercase; }, input::-webkit-input-placeholder { text-transform: lowercase; } to one of the paper-input's shared style mixin.
4. Serve and notice the difference.

Browsers Affected

• [x] Chrome
• [ ] Firefox
• [x] Safari 9
• [ ] Safari 8
• [ ] Safari 7
• [ ] Edge
• [ ] IE 11
• [ ] IE 10