Disabled input text color

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 behaviour ...

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

-------------Problems Reply------------

-webkit-text-fill-color:#880000

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.

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

-webkit-text-fill-color:#880000;
/* The opacity must be set to 1*/
-webkit-opacity: 1;

For safari mobile, these two properties must be set.

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>

In cases like this one, what I do is to solve it with scripting. It's not the most beautiful solution, but it works.

$(window).load(function()
{
if ($.browser.webkit)//check if the actual browser is webkit based
{
$("input:disabled").css({'border':'solid 1px #880000', 'background-color':'#ffffff', 'color':'#880000'});//here you set the input properties as you wish
}
});

Give a look here in the jQuery docs: http://api.jquery.com/jQuery.browser/ I know it's not really right, but in work I must make fast the pages look and work equally in the principal browsers so, while dealing with problematic browsers like webkit it's the only answer I could find so far. I hope there is one better than this outside there! ;)

But please, just use solutions like this one. When you couldn't find anything of how to solve your problem, or worse, when you find proofs of that your problem is really an unsolved browser bug!!

I hope it helps someone!

Category:iphone Views:0 Time:2008-11-04

Related post

  • Change the font color of disabled input text box? 2011-11-10

    Q: Is it possible to change the font of a disabled input box? In IE8/9 it shows up as light gray and is barely readable. Chrome and Firefox are fine (of course). I have tried to set the css style to color: #000 !important but it's still very light gr

  • CSS: Get "disabled" input background color? 2012-04-27

    Is there a special CSS system color equivalent to the system's disabled text input background color? I know there's one for the disabled text color (GrayText), but I can't find one for the background color. To make it more clear, I'm looking for the

  • method to disable input text using javascript until a function is completed 2011-06-10

    i have a input box and i want to temporarily disable input until a function completes in javascript and then re-enable it. i know the element.disabled = true and element.disabled = false (doing that after the function) wont bring it back to the enabl

  • Allow Copy/Paste in a disabled input text box in Firefox browsers 2012-01-16

    I have a input text box disabled: <input type="text" name="name" disabled="disabled" /> In IE and in Chrome you can copy and paste the value populated in that input field but in Firefox you cannot. Firefox does not allow clipboard manipulation

  • Disable input text in wicket 2012-04-23

    I have hml form with two input text <input type="text" wicket:id = "query"/> <input type="text" wicket:id= "address"/> I need to implement choose mechanism. When someone start to write query then address should be disable and vice versa.

  • Setting tooltips for disabled input text boxes in javascript and CSS 2010-08-16

    I am trying to display a tooltip when you hover over a textbox which has been disabled to indicate why the textbox has been disabled. Setting the title attribute works on IE but doesn't seem to work in Mozilla Firefox. Does anyone know of a simple so

  • Input text color not set on browser override 2011-07-06

    I'm working on a site that needs to allow people to override the colors of the text through their browser settings. The way I've been doing this is to NOT set any color values for text in the CSS. In my testing I've noticed that inputs and selects wh

  • jquery ui dialog disables input text and textarea 2012-03-15

    I have an html page which has some html form elements and jquery if I open the html page as a standalone page, everything seems fine, however, if I open the page as jquery ui dialog whithin an aspx web forms page (I get the contents of the html page

  • NSButton - set text color in disabled mode 2011-06-16

    For some reason, when my button is disabled, the text color turns white. I want it to stay black - how can i do that? --------------Solutions------------- You can set text, image, colors, fonts, etc. for different status of a button: normal, highligh

  • How can i keep red color on input text when page is reload/ jQuery 2012-04-20

    Is it possible to keep the red color input text(i.e. when the email is wrong) after page reload/refresh/pressed f5? The problem is that, when i press f5 or refresh page, the input text color changes from red to it default black color. Will be glad if

  • IE9 highlighting text in a disabled input bug 2014-04-13

    In Internet Explorer 9 I have a very simple page in which there is a disabled input text field : <!DOCTYPE html> <html> <head> <title>This is a test</title> </head> <body> <form> <input id="test" typ

  • Trigger jQueryUI datePicker on button click, send result to disabled input field 2010-04-09

    I've been searching for a way to do this, but could not find anything I want to have a: Disabled input text field, called #XX. This input will store the selected value from datepicker (as this input is disabled I won't be able to use this to trigger

  • Windows 8 Desktop UI - Change Title Text Color? 2012-05-07

    Anybody have any idea how to change the title text color on windows. The fact that it's always black makes it pretty useless on any dark colored theme... I would have thought they would have programmed this in. I thought wrong... imgur: the simple im

  • jqgrid disable input and change text color in IE 2011-03-15

    Is there a way in IE to disable cell input inside grid and change it's color (so it won't be gray)? Or Is there another way to disable an input - and not by changing it to "readonly"? UPDATE: I'm using inline editing , and my cell input is a regular

  • Hide or disable Input Gesture Text in wpf 2010-09-01

    Say we're using "Ctrl+S" input gesture for saving the project. In File menu - "Save Ctrl+S" such text is displayed. Now on canexecute of SaveCommand I check whether project required save or not. If it doesnt require then Save is disabled. In that cas

  • Apply text color on disabled=true textbox 2010-11-02

    I would like to know if it's possible to force a CSS Color on a "disabled=true" textbox? By default, this attribute is removing the css font color and replacing it by a very light gray. Thanks --------------Solutions------------- input[disabled='disa

  • HTML text color in disabled text box 2010-12-26

    I have a text box in html, I have set the text box to disabled, <input type="text" style="background-color:transparent; text-align:center" disabled="disabled" /> So the text color in this text box is gray, how can I change it to any color I wan

  • How to change font-color for disabled input? 2011-05-31

    I need to change the style for a disabled input element in CSS. <input type="text" class="details-dialog" disabled="disabled" /> How I can do this for Internet Explorer? --------------Solutions------------- You can't for Internet Explorer. See

  • Disable other text boxes on input using jQuery 2009-02-26

    I've got a form with several search (text) fields. When text is entered into one of the fields, I'd like to disable the others. Conversely, if all text is removed from the active text field, the other fields should be re-enabled. The basic idea would

Copyright (C) dskims.com, All Rights Reserved.

processed in 0.075 (s). 11 q(s)