Skip to content

Commit

Permalink
Fix inconsistent input[disabled] color in Safari
Browse files Browse the repository at this point in the history
Fixes jgthms#2355 

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).

Multiple users reported confusion, thinking the `<input disabled> value=` was instead `placeholder=` text, because it was so faded.

Bulma is [already choosing to override the default `<input disabled>` text `color`](https://github.com/jgthms/bulma/blob/ff8c4c18accf2c0094aa77945b1d2180ac927159/sass/elements/form.sass#L67). That setting simply isn't taking effect in Safari & iOS Safari.

This PR fixes it.
  • Loading branch information
dsernst authored Jun 4, 2019
1 parent 01a1321 commit d3770e1
Showing 1 changed file with 2 additions and 0 deletions.
2 changes: 2 additions & 0 deletions sass/form/shared.sass
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@ $input-radius: $radius !default
border-color: $input-disabled-border-color
box-shadow: none
color: $input-disabled-color
-webkit-text-fill-color: $input-disabled-color
opacity: 1
+placeholder
color: $input-disabled-placeholder-color

Expand Down

0 comments on commit d3770e1

Please sign in to comment.