Disabled input text color

iphone html css safari webkit
Incidently picture Incidently · Nov 4, 2008 · Viewed 76.8k times · Source

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>

Answer

Kemo picture Kemo · Jan 10, 2011 
-webkit-text-fill-color: #880000;
opacity: 1; /* required on iOS */

Related questions

Span inside anchor tag blocks tap event for Safari on iPhone

I've styled an ordinary link to resemble a button in our Sencha Touch 2-based mobile application, and I'm having issues with most of the link not functioning in Safari on the iPhone. The link is an ordinary <a> …

Read More
Turn off iPhone/Safari input element rounding

My website renders well on the iPhone/Safari browser, with one exception: My text input fields have a weird rounded style which doesn't look good at all with the rest of my website. Is there a way to instruct Safari (…

Read More
How do I put a clear button inside my HTML text input box like the iPhone does?

I want to have a nice little icon that, when clicked will clear the text in the <INPUT> box. This is to save space rather than having a clear link outside of the input box. My CSS skills …

Read More