Disabled input text color on iOS

iphone html css safari webkit

99,049

Solution 1

-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */

Solution 2

Phone and Tablet webkit browsers (Safari and Chrome) and desktop IE have a number of default changes to disabled form elements that you'll need to override if you want to style disabled inputs.

-webkit-text-fill-color:#880000; /* Override iOS / Android font color change */
-webkit-opacity:1; /* Override iOS opacity change affecting text & background color */
color:#880000; /* Override IE font color change */

Solution 3

UPDATED 2021:

Combining ideas from this page into a "set and forget" reset that makes all disabled text the same as normal text.

input:disabled, textarea:disabled, input:disabled::placeholder, textarea:disabled::placeholder {
  -webkit-text-fill-color: currentcolor; /* 1. sets text fill to current `color` for safari */
  opacity: 1; /* 2. correct opacity on iOS */
}

Solution 4

it's an interesting question and I've tried plenty of overrides to see if I can get it going, but nothing's working. Modern browsers actually use their own style sheets to tell elements how to display, so maybe if you can sniff out Chrome's stylesheet you can see what styles they're forcing on to it. I'll be very interested in the result and if you don't have one I'll spend a little time myself looking for it later when I have some time to waste.

FYI,

opacity: 1!important;

doesn't override it, so I'm not sure it's opacity.

Solution 5

You could change color to #440000 just for Safari, but IMHO the best solution would be not to change looks of button at all. This way, in every browser on every platform, it will look just like users expect it to.

View more solutions

99,049

Incidently

Updated on July 08, 2022

Comments

Incidently almost 2 years
The simple HTML below displays differently in Firefox and WebKit-based browsers (I checked in Safari, Chrome and iPhone).

In Firefox both border and text have the same color (#880000), but in Safari the text gets a bit lighter (as if it had some transparency applied to it).

Can I somehow fix this (remove this transparency in Safari)?
```
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
        input:disabled{
            border:solid 1px #880000;
            background-color:#ffffff;
            color:#880000;
        }
        </style>
    </head>
    <body>
        <form action="">
            <input type="text" value="disabled input box" disabled="disabled"/>
        </form>
    </body>
</html>
```
- Miguel about 6 years
  
  I also noticed this, for me this is a bug, since when you put background-color:white of the input it will show the color again correctly. Also opacity has little effect. Althought the -webkit-text-fill-color:#880000 will work
Incidently over 15 years

not really... in my real application those textboxes are usually enabled and used for input, and only under certain conditions they get disabled with JavaScript I can figure out a workaround (like, replace <input/> with a styled <div></div> instead of setting 'disabled') - but it really feels wrong
Incidently over 15 years

thanks man yep, this was my first idea too, but it doesn't work for me because of focus: on iPhone the keyboard pops up when a user taps a readonly element, and this is confusing I've found my workaround, and my question is rather 'theoretical' - why this behaviour?
Incidently over 15 years

thanks! I couldn't find an explanation (nothing like that in Chrome's user agent style sheet - only "background-color: rgb(235, 235, 228)" for disabled inputs) and I'm using a workaround, but still curious what's going on ...
avernet over 13 years

Steve, thank you for the effort, but I suggest in the future you post this as a comment rather than an answer.
avernet over 13 years

An interesting workaround: the focus issue also poses usability problems, in particular for people using screen readers. In most cases, you just wouldn't want users to be able to tab to readonly/disabled fields in a form.
stephan.com over 13 years

and for Firefox, use input:-moz-placeholder
philfreo about 13 years

eh.. this is for the placeholder attribute, I don't think that has an affect on disabled fields. @Kemo's answer below (-webkit-text-fill-color) does work though
raratiru over 12 years

I wanted my disabled input box to look like a normal one. This is the only thing that would work in Safari Mobile. -webkit-text-fill-color: rgba(0, 0, 0, 1); -webkit-opacity: 1; background: white;
David Jones about 11 years

@Ryan is right about – opacity must be set to 1 for Mobile Safari.
istvan.halmen over 10 years

It is also needed on Android stock browser
Marcel Falliere almost 9 years

opacity:1 is also necessary.
Kelderic almost 8 years

Opacity isn't needed in current builds of Safari, as of Summer 2016.
aruno almost 7 years

@AndyMercer yes it is - if you don't want a faded version of the color. especially important if you want a white background too
Lentyai almost 7 years

Saved my day! Yet it also affects the coloring of the placeholder text color of the input element. In case you'll need a fix for it too, look at this link: css-tricks.com/almanac/selectors/p/placeholder
Yao Zhao about 4 years

@Lentyai life saver! mention that we should use :placeholder-shown to help
Esten almost 3 years

This doesn't seem to work as a "set and forget" solution. currentColor doesn't seem to behave as expected when used with -webkit-text-fill-color: jsfiddle.net/y1sgena2/2
paulcol. almost 3 years

@esten I've reviewed this and it still seems to work in the latest Safari/iOS (2021)
Esten almost 3 years

the fiddle I posted works? Not working for me in safari Version 14.1.1 - not sure if thats the latest version
paulcol. almost 3 years

@esten your fiddle demonstrates that something isn't working, I can see that too and I'm not sure why - maybe you're trying to have a custom disabled color, which the "set and forget" reset solution i posted doesn't do of course. Here's a working fiddle with my solution (tested in iOS14.2) jsfiddle.net/crgm4bz9/1