Safari's input[disabled] text is too faded

[dsernst]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework.
I'm using Bulma version 0.7.2.
My browser is: Desktop Safari 11.1.2, iOS Safari 10.3.3.
I am sure this issue is not a duplicate.

Description

Safari is rendering disabled input fields with faded text.

Instead of the Bulma default #7a7a7a (48% luminosity), the input text renders at #cecece (81% luminosity).

Steps to Reproduce

<input disabled value="Some text" />

Expected behavior

Text color would match across browsers.

Actual behavior

---

Here's a StackOverflow documenting this issue (not Bulma specific): https://stackoverflow.com/questions/262158/disabled-input-text-color

It looks like one solution is patching sass/elements/form.sass:

input
  &[disabled],
  fieldset[disabled] &
+   -webkit-text-fill-color: $input-disabled-color
+   opacity: 1

Happy to submit a PR if welcome.

[Neha]

Hey,
Every browser has its own styling or default style for native HTML tags. When developing a lib/framework should we leave the tags default behavior on the browser and if any user wants to change it, they can go ahead and do needful changes in its own code?

What is your thought?

Thanks,
Neha

[dsernst]

Multiple users reported they were confused, thinking the <input disabled> field's value= was instead placeholder= text, because it was so faded.

I agree in part with the sentiment to respect browser defaults.

But Bulma is already choosing to override the default <input disabled> text color. That setting simply isn't taking effect in Safari & iOS Safari.

I believe this can be considered more of a bug than a stylistic choice.

[Neha]

Make sense. Especially when the Bulma has taken care of the code to override the browser(s) default style.

You should raise the PR with fix as you suggested.

[mxlje]

Is someone working on this? I tried out the fix above and it does fix the issue for me.

[dsernst]

PR opened: #2517

[stale]

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.