Disabled input text color on iOS

Question

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>

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, Apr 06 '18 at 12:25

score 304 · Accepted Answer · edited Jun 03 '19 at 16:11

304

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

edited Jun 03 '19 at 16:11

frzsombor

2,274
1
22
40

answered Jan 10 '11 at 15:21

Kemo

3,056
1
15
2

56

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; – Ryan Nov 03 '11 at 14:39
1

It is also needed on Android stock browser – istvan.halmen Feb 13 '14 at 08:29
5

Opacity isn't needed in current builds of Safari, as of Summer 2016. – Kelderic Jul 29 '16 at 12:57
4

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: https://css-tricks.com/almanac/selectors/p/placeholder/ – Lentyai Aug 14 '17 at 09:20

score 50 · Answer 2 · edited Aug 14 '15 at 20:15

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

paulcol. · Answer 3 · 2021-07-13T01:55:10.080

21

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

edited Jul 13 '21 at 01:55

answered Apr 27 '19 at 01:44

paulcol.

2,910
1
21
19

1

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`: https://jsfiddle.net/y1sgena2/2/ – Esten Jun 15 '21 at 21:57
@esten I've reviewed this and it still seems to work in the latest Safari/iOS (2021) – paulcol. Jul 05 '21 at 20:44
the fiddle I posted works? Not working for me in safari Version 14.1.1 - not sure if thats the latest version – Esten Jul 12 '21 at 19:04
@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) https://jsfiddle.net/crgm4bz9/1/ – paulcol. Jul 13 '21 at 01:53
1

@paulcol. Your fiddle currentColor isn't working when I change color to green. – user3221820 Dec 21 '22 at 09:02

score 6 · Answer 4 · answered Nov 04 '08 at 23:22

6

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.

answered Nov 04 '08 at 23:22

Steve Perks

5,490
3
28
41

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 ... – Incidently Nov 05 '08 at 17:33
1

Steve, thank you for the effort, but I suggest in the future you post this as a comment rather than an answer. – avernet Nov 19 '10 at 18:49

score 6 · Answer 5 · answered Nov 05 '08 at 00:00

6

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.

answered Nov 05 '08 at 00:00

Kornel

97,764
37
219
309

score 6 · Answer 6 · answered Jul 20 '17 at 08:31

6

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;

answered Jul 20 '17 at 08:31

vanduc1102

5,769
1
46
43

Serxipc · Answer 7 · 2008-11-05T16:33:09.140

5

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

edited Nov 05 '08 at 16:33

answered Nov 05 '08 at 16:27

Serxipc

6,639
9
40
51

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 Nov 05 '08 at 17:25
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. – avernet Nov 19 '10 at 18:51

Freez · Answer 8 · 2019-03-20T03:45:04.160

3

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/

edited Mar 20 '19 at 03:45

answered Mar 20 '19 at 03:35

Freez

7,208
2
19
29

score 2 · Answer 9 · answered Jun 01 '10 at 16:09

2

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;
}

answered Jun 01 '10 at 16:09

conceptDawg

732
3
12

3

and for Firefox, use input:-moz-placeholder – stephan.com Dec 28 '10 at 11:12
2

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 – philfreo May 12 '11 at 18:45

score 0 · Answer 10 · answered Nov 04 '08 at 16:56

0

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>

answered Nov 04 '08 at 16:56

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 with a styled
instead of setting 'disabled') - but it really feels wrong – Incidently Nov 04 '08 at 18:35

Disabled input text color on iOS

10 Answers10

Linked