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)?
UPDATE:
Thank you for your answers. I don't need this for my work anymore (instead of disabling I'm replacing input
elements with styled div
elements), but I'm still curious why this happens and if there is any way to control this behavior ...
<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>
-webkit-text-fill-color:#880000
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 */
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.
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.
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
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;
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;
}
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>