23

I'm having a problem with my font color in safari browser on mac book, iphone and ipad. The disable element turn into gray and I want it to retain its original color black. The result in firefox and chrome are okay.

This is my css code:

input[disabled], textarea[disabled],
select[disabled='disabled']{
    color: #000000 !important;
}

I also tried using color name but he result is the same.

Thanks for your help!

kwan_ah
  • 1,061
  • 1
  • 12
  • 18
  • maybe you can try to add this to your css: yourelement:disabled { color: #000000 } – Frnak Jan 28 '14 at 08:23
  • Seems you're not the only one having [**this issue**](http://stackoverflow.com/questions/14547632/why-is-text-in-disabled-form-elements-not-rendered-in-black-in-safari). – Frankenscarf Jan 28 '14 at 08:25
  • 1
    Does `-webkit-text-fill-color` have anything to do with it? – Stuart Jan 28 '14 at 11:03

2 Answers2

58

This is the only solution I found that works on FF, Chrome, Safari and Safari Mobile. Cheers!

input[disabled], textarea[disabled],
select[disabled='disabled']{
   -webkit-text-fill-color: rgba(0, 0, 0, 1); 
   -webkit-opacity: 1; 
   color: rgba(0, 0, 0, 1); 
   background: white;
}
SpaceBeers
  • 13,617
  • 6
  • 47
  • 61
kwan_ah
  • 1,061
  • 1
  • 12
  • 18
  • Curious as to how this works in FF but it helped me out so +1. – SpaceBeers Apr 08 '14 at 07:45
  • Thanks, webkit seems to git disabled inputs a lower opacity, I couldn't figure out why setting the color to #000 didn't help. – blaedj Dec 13 '14 at 22:26
  • -webkit-text-fill-color: rgba(0, 0, 0, 1); -webkit-opacity: 1; //on iphone it is required Thanks it worked for me – jbmyid Nov 06 '15 at 09:45
  • Nice work! This was a really odd and unforeseen problem that cost me a lot of time. You really helped me out! – Matthew David Jankowski Mar 09 '16 at 21:45
  • 2
    Thanks! The text-fill-color was the key for me. – Steve Mar 31 '16 at 15:31
  • I could see a warning as not to use `webkit-text-fill-property` in production websites in the mdn docs https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color. – siva Mar 18 '19 at 09:38
1

You could try set it to anything but solid black such as #00001 or #000002 in order to get around the issue as safari tries to override it.

input[disabled], textarea[disabled],
select[disabled='disabled']{
    color: #000001 !important;
}
AO_
  • 2,573
  • 3
  • 30
  • 31