Let's define a color for input placeholders

Which package is this issue related to?

ffe-form

Describe your issue (screenshots welcome!)

In #237 we addressed the issue of placeholders in IE getting the same color as the text color.

After bumping ffe-form in our app, I noticed the placeholder of an input field now differed from the placeholder of a searchable dropdown.

While a HTML dropdown can’t have a placeholder out of the box, the searchable dropdown is technically an input field, so it can have a placeholder. However, it’s styled with .ffe-dropdown, so it doesn’t get our new placeholder styling from #237

What’s more is I just did an attempt to apply placeholder color to a dropdown, which worked fine, but again it differed from our styled input placeholder.

In the following screenshot we see three variants of a placeholder color: The first is truly @ffe-grey-charcoal, which we decided for #237 should be our placeholder color. The second is a searchable dropdown with default Chrome placeholder color. The third is an input field with .ffe-input-field. Because of #237 the color here should’ve been the same as the first one, but it’s definately not.

According to an article about placeholder Firefox applies some opacity to your placeholder color, but Chrome 47 does not. Now, with Chrome 66, it seems like that’s no longer true; Chrome is now adding opacity to placeholders.

I tried adding some opacity to the input field placeholder, as well as my dropdown placeholder, to make our @ffe-grey-charcoal placeholder match default Chrome placeholder. It seems a value of .75 is a match here, but of course this means our actual placeholder color doesn’t exist in our color palette.

Suggestions and questions

• add ::placeholder color to .ffe-dropdown as well, to fix the searchable dropdown
• add opacity to both placeholders, to make sure they look consistent
  • should this be .75 to match default Chrome placeholder, simply 1 to use the color from our palette, or perhaps something else?
• add some styling and code to allow for a placeholder-color on regular dropdowns

[adidick-zz]

It sounds like it would be safest to go with charcoal at opacity 1. The downside is that the charcoal might look similar to black but we still have the placeholder text to describe what the user needs to do. And then, at worst, they will still get an error message if they don’t see the placeholder text and leave the field blank. I think that gives us the most control and keeps everything standardised meaning that any other small discrepancies are created by default browser silliness. Sound good?

[henrikhermansen]

Sounds good indeed! After a brief chat with Adi we also decided to leave regular dropdowns as they are, but apply ::placeholder to .ffe-dropdown. This will give the correct placeholder color to searchable dropdown and account selector, which in fact are input fields that can have a placeholder property.