ansaurus

Question

Answer 1

A:

Can you use a button instead of an input?

<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<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>

2008-11-04 16:56:21

not really... in my real application those textboxes are usually enabled and used for input, and only under certain conditions they get disabled with JavaScriptI can figure out a workaround (like, replace <input/> with a styled <div></div> instead of setting 'disabled') - but it really feels wrong

Incidently 2008-11-04 18:35:12

Answer 2

A:

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.

Steve Perks 2008-11-04 23:22:57

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 2008-11-05 17:33:30

Answer 3

+5 A:

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.

porneL 2008-11-05 00:00:23

Answer 4

+1 A:

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"&gt;
<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

Serhii 2008-11-05 16:27:44

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 2008-11-05 17:25:07

Answer 5

A:

Hi Guys,

I have this same problem, someone have found how to fix this ?

saymon 2009-12-01 15:34:42

Answer 6

+1 A:

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

conceptDawg 2010-06-01 16:09:23

Answer 7

A:

There is still no proper answer posted here for this question. It seems only logical that there would be a uniform way to reset the colour of a disabled textbox to actually be the colour specified, not a slightly lighter version. Anyone?

Aidin 2010-08-12 23:14:36

ansaurus

tags:

views:

answers:

Disabled input text color

related questions