Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow styling of placeholder on paper-input #676 #677

Closed
wants to merge 3 commits into from
Closed

Allow styling of placeholder on paper-input #676 #677

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9b6d16d
Allow styling of placeholder on paper-input
Oct 27, 2018
901881c
Introduce documentation for placeholder color
Oct 29, 2018
0b299ef
Almost forgot -ms-input-placeholder
Oct 29, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions paper-input.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ The following custom properties and mixins are available for styling:
Custom property | Description | Default
----------------|-------------|----------
`--paper-input-container-ms-clear` | Mixin applied to the Internet Explorer reveal button (the eyeball) | {}
`--paper-input-container-input-placeholder-color` | The foreground color of the placeholder | `--paper-input-container-color`, `--secondary-text-color`

@group Paper Elements
@element paper-input
Expand Down Expand Up @@ -134,15 +135,15 @@ Polymer({
}

input::-webkit-input-placeholder {
color: var(--paper-input-container-color, var(--secondary-text-color));
color: var(--paper-input-container-input-placeholder-color, var(--paper-input-container-color, var(--secondary-text-color)));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please add to documentation at the top

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@e111077 @ChrisBrownie55 Can this be made in a CSS mixin? I really need to be able to modify more than color ..

Copy link
Author

@andria-dev andria-dev Nov 23, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@acory The @apply rule has been abandoned according to https://chromium.googlesource.com/chromium/src/+/5874fca7324e4523a4bdecc8999bdadfdb6c4eff

Therefore, it could be possible to add that in but it would also make sense to leave this in as well. That way both would still be supported.

However, I would suggest not using the @apply rule at all seeing as it is only supported for backward compatibility purposes and the Shadow Parts specification is currently the future.

https://github.com/webcomponents/shadycss

}

input:-moz-placeholder {
color: var(--paper-input-container-color, var(--secondary-text-color));
color: var(--paper-input-container-input-placeholder-color, var(--paper-input-container-color, var(--secondary-text-color)));
}

input::-moz-placeholder {
color: var(--paper-input-container-color, var(--secondary-text-color));
color: var(--paper-input-container-input-placeholder-color, var(--paper-input-container-color, var(--secondary-text-color)));
}

input::-ms-clear {
Expand All @@ -154,7 +155,7 @@ Polymer({
}

input:-ms-input-placeholder {
color: var(--paper-input-container-color, var(--secondary-text-color));
color: var(--paper-input-container-input-placeholder-color, var(--paper-input-container-color, var(--secondary-text-color)));
}

label {
Expand Down