Disabled input text color on iOS

112
votes

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>
10
iphonehtmlcsssafariwebkit
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 – Miguel

10 Answers

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

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 */
13
votes

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 */
}
6
votes

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.

6
votes

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.

5
votes

for @ryan

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;
4
votes

You can use the readonly attribute instead of the disabled attribute, but then you will need to add a class because there isn't a pseudo-class input:readonly.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
button.readonly{
    border:solid 1px #880000;
    background-color:#ffffff;
    color:#880000;
}
</style>
</head>
<body>
<form action="">
    <button type="button" readonly="readonly" class="readonly">disabled input box</button>
</form>
</body>
</html>

Beware that a disabled input and readonly input aren't the same. A readonly input can have focus, and will send values on submit. Look at w3.org

3
votes

If you want to fix the problem for all the disabled inputs, you can define -webkit-text-fill-color to currentcolor, so the color property of the input will be used.

input[disabled] {
   -webkit-text-fill-color: currentcolor;
}

See that fiddle on Safari https://jsfiddle.net/u549yk87/3/

2
votes

This question is very old but I thought that I would post an updated webkit solution. Just use the following CSS:

input::-webkit-input-placeholder {
  color: #880000;
}
0
votes

Can you use a button instead of an input?

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
    button:disabled{
        border:solid 1px #880000;
        background-color:#ffffff;
        color:#880000;
    }
    </style>
</head>
<body>
    <form action="">
        <button type="button" disabled="disabled">disabled input box</button>
    </form>
</body>
</html>