Disabled input text color on iOS

Asked 4/11, 2008 at 15:26 Answered 28/11, 2023 at 3:0

133

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>

British answered 4/11, 2008 at 15:26 Comment(2)

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 – Shriek 6/4, 2018 at 12:25

iOS is the new IE – Talapoin 21/4, 2023 at 22:37

311

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

Kelci answered 10/1, 2011 at 15:21 Comment(4)

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; – Hartmann 3/11, 2011 at 14:39

It is also needed on Android stock browser – Brit 13/2, 2014 at 8:29

Opacity isn't needed in current builds of Safari, as of Summer 2016. – Patricapatrice 29/7, 2016 at 12:57

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 – Tricolor 14/8, 2017 at 9:20

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

Tezel answered 7/5, 2014 at 7:20 Comment(0)

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

Caudell answered 27/4, 2019 at 1:44 Comment(5)

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 – Marozik 15/6, 2021 at 21:57

@esten I've reviewed this and it still seems to work in the latest Safari/iOS (2021) – Caudell 5/7, 2021 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 – Marozik 12/7, 2021 at 19:4

@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 – Caudell 13/7, 2021 at 1:53

@Caudell Your fiddle currentColor isn't working when I change color to green. – Caramelize 21/12, 2022 at 9:2

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.

Mailbox answered 4/11, 2008 at 23:22 Comment(2)

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 ... – British 5/11, 2008 at 17:33

Steve, thank you for the effort, but I suggest in the future you post this as a comment rather than an answer. – Encyclopedist 19/11, 2010 at 18:49

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.

Sherd answered 5/11, 2008 at 0:0 Comment(0)

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;

Matrices answered 20/7, 2017 at 8:31 Comment(0)

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

Incoercible answered 5/11, 2008 at 16:27 Comment(2)

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? – British 5/11, 2008 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. – Encyclopedist 19/11, 2010 at 18:51

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/

Rasbora answered 20/3, 2019 at 3:35 Comment(0)

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

Doloroso answered 1/6, 2010 at 16:9 Comment(2)

and for Firefox, use input:-moz-placeholder – Audre 28/12, 2010 at 11:12

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 – Merganser 12/5, 2011 at 18:45

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>

Upwind answered 4/11, 2008 at 16:56 Comment(1)

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 – British 4/11, 2008 at 18:35

Work for me:

.default:disabled {
  background-color: var(--white-200);
  -webkit-text-fill-color: var(--black-transparent-300);
}
    
.default::-webkit-input-placeholder {
  -webkit-text-fill-color:  var(--color-placeholder);
  color: var(--color-placeholder) !important;
}

Germanize answered 28/11, 2023 at 3:0 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags