Barely visible input placeholder in Firefox

[crabvk]

Bulma CSS framework, bug Bulma version 0.8.2 Firefox Developer Edition 75.0b7

Description: Firefox default opacity: 0.5 for input/textarea placeholders makes them barely visible.

[ghost]

Can you provide a screenshot?

[crabvk]

Sure

[jgthms]

Probably same issue as #2885

[crabvk]

Just tested with revert of 5ba407bf91107fb6284327d23253065caccd9604, the problem still exists.

[ondrej-tucek]

Hi, I don't want to open a new issue because it's maybe the same error. If I open bulma.io -> form with FF v74 (left screenshot), the color of placeholder is different than in Chromium v80 (right).

[surister]

Yeah, placeholder opacity is almost invisible in Firefox, maybe make this modifiable via variables?

[scheinercc]

In order to make it cross browser compatible the RGBA value needs to be replaced, as it doesn't work for Firefox. It adds up the color's opacity, set in Bulma, with the base opacity of Firefox. Changing it to separate color and opacity value instead, will give the same result in the browsers:

https://github.com/jgthms/bulma/blob/master/sass/form/shared.sass#L19 https://github.com/jgthms/bulma/blob/master/sass/form/shared.sass#L52

L19:

$input-disabled-placeholder-color: $input-disabled-color !default
$input-disabled-placeholder-opacity: 0.3 !default

L52:

    +placeholder
          color: $input-disabled-placeholder-color
          opacity: $input-disabled-placeholder-opacity

This will not have any negative effect on peoples' current settings for $input-disabled-placeholder-color - it should come out just the same.

relates to #2168: https://github.com/jgthms/bulma/search?q=%24input-disabled-placeholder-color&unscoped_q=%24input-disabled-placeholder-color

(sorry for the many little edits)

Note: changing this might also (positively!?) affect #2891

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[scheinercc]

@jgthms what do you think of my suggestion above? RGB + opacity works in all browsers, while RGBA values only in some.

[rukshn]

I can also confirm that the placeholders are barely visible on FireFox, please fix in coming release @jgthms

[terabytesoftw]

• That capture is Chrome, as seen in FireFox, Edge, the color of the placeHolder must be corrected.

[getup8]

As a workaround, set the placeholder color variable to whatever color you actually want it to be:

$input-placeholder-color: #999;

And then make sure Firefox shows it at 100% opacity:

::placeholder {
  opacity: 1;  // For Firefox.
}

I do think it'd make sense to add that opacity setting to bulma to account for Firefox.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[scheinercc]

@jgthms you mind taking a quick look. It's a pretty small change. Cheers