fix(form): float labels result in too little contrast for inactive placeholders.

[Benunc]

Issue Overview

Float labels enabled makes the contrast too low on placeholders.

Expected Behavior

There should be enough contrast to read.

Current Behavior

There's not enough contrast for accessibility, or comfortable reading in general.

Possible Solution

revert to #333 as the color there.

Expand for a temporary snippet @kevinwhoffman made:

.fl-form input.fl-input:-moz-placeholder,
[id*=give-form] .fl-form select.fl-select:-moz-placeholder,
[id*=give-form] .fl-form textarea.fl-textarea:-moz-placeholder {
    color: #333
}
[id*=give-form] .fl-form input.fl-input::-moz-placeholder,
[id*=give-form] .fl-form select.fl-select::-moz-placeholder,
[id*=give-form] .fl-form textarea.fl-textarea::-moz-placeholder {
    color: #333
}
[id*=give-form] .fl-form input.fl-input:-ms-input-placeholder,
[id*=give-form] .fl-form select.fl-select:-ms-input-placeholder,
[id*=give-form] .fl-form textarea.fl-textarea:-ms-input-placeholder {
    color: #333
}
[id*=give-form] .fl-form input.fl-input::-webkit-input-placeholder,
[id*=give-form] .fl-form select.fl-select::-webkit-input-placeholder,
[id*=give-form] .fl-form textarea.fl-textarea::-webkit-input-placeholder {
    color: #333
}
[id*=give-form] .fl-form select.fl-select {
    color: #333;
}
[id*=give-form] .fl-form label.fl-label {
    color: #333;
}

Steps to Reproduce (for bugs)

1. running 1.8.13, enable floated labels.
2. view the form
3. inspect in dev tools to see that the color is #bbb when it should be #333

Related Issues and/or PRs

#2155

Todos

• Tests

[kevinwhoffman]

I recommend #757575 for placeholder text. It is a light gray but still meets WCAG AA standards.