Help Questions | Solutions | Experts

Select Categories Below

.net [

]

Bluetooth [

]

browsers [

]

C# [

]

computer [

]

Errors [

]

forms [

]

HTML [

]

information tec... [

]

internet [

]

Start Your Own Q&A Site

Create your own Q&A site easily, allowing you to quickly grow a new community around any subject matter or generate new organic traffic for your existing website.

Question

Status: Closed Points: 75 Time: 06:33 - Dec 27, 2006

david

css for disabled textarea or textbox?

I have some textboxes and textareas that might or might not be disabled.
Visually this has to be clear to the user, and in Firefox the boxes are greyed out automatically, but in Internet Explorer they aren't.
Is there a css property to set this style or do I have to invent my own class?

Categories:

CSS browsers
firefox Web Design
Internet Explorer

Answer Discussion

Tutorials

rcastagna

Date:: Dec 28, 2006

Time:: 10:27

david...

Approach this one with care...IE doesn't behave the same way as FF as you've already experienced.

If you use the "disabled" parameter for the field FF will "gray out" the disabled textbox or textarea...IE will gray out any text contained in there, but won't add the cool gray background to the field.

You can, however, create a "disabled" class in your css file, but in my tests, I couldn't get it to work as an inherited property off the input tag so that means you'll have to set the class when you set the disabled property.

You can copy/paste this test to see how it works in both IE & FF:

<HTML>
<HEAD>
<style type="text/css">
.disabled
{
background-color: #CCC;
}
</style>
</HEAD>
<BODY>
<input type="text" value="Enabled">
<br>
<input type="text" disabled class="disabled" value="Disabled">
<p/>
<textarea disabled class="disabled">This is the content of a textarea</textarea>
</BODY>
</HTML>

Hope this helps!

Ric

xarcus

Date:: Dec 28, 2006

Time:: 10:44

No CSS for disabled
Use HTML controls attribute "disabled"

W3 http://www.w3.org/TR/html4/interact/form...
MS http://msdn.microsoft.com/workshop/autho...

<html>
<head>
<title>Test</title>
<script type="text/javascript">
function disable_controls( state) {
var frm = document.forms[0] ;
var len = frm.elements.length ;
var cnt = 0 ;
for ( var i=0; i < len; i++) {
  var elem = frm.elements[i] ;
  if (elem.type != "hidden") {
elem.disabled = state ;
    }
}
}
</script>
</head>
<body>
<button onclick="disable_controls( false)">Enable</button>
<button onclick="disable_controls( true)">Disable</button>
<br>

<form action="yours" method="POST" enctype="application/x-www-form-urlencoded">
<input name="t1" disabled size="10" value="ini val" type="text">
<br>
<textarea name="t2" cols="10" disabled >abc
def</textarea> </form>
</body>
</html>

xarcus

Date:: Dec 28, 2006

Time:: 10:59

In MSIE the contents appear greyed.

for the background you can add this line to my disable_controls() routine
after
elem.disabled = state ;
insert
elem.style.backgroundColor = state?"yellow":"white" ;

rcastagna

Date:: Jan 04, 2007

Time:: 15:47

hmmm....looks like your solution does the exact same thing that I suggested.

why do you bash using CSS when your "elem.style.backgroundColor = state?"yellow":"white";" does effectively the same thing?

My impression was that David needs to set the disabled state of a field programmatically, and could use the following:

function Disable(id) {
var ctrl = document.getElementById(id);
ctrl.disabled = false;
ctrl.style.class = "";
}

My apologies if I took your comments harshly and incorrectly, mate.

ric

david

Date:: Jan 05, 2007

Time:: 00:59

thanks ric and xarcus for your suggestions.
You're right, ric, that what I needed was to disable/enable the fields programatically. And your suggestion about using a "disabled" class is the one I ended up using, although I was initially hoping that there were a css-property i could use instead, like a:hover...
So I'll live with this solution and perhaps in CSS3 and when the browsers support that in 2020... :)

JohnDoranNYC

Date:: Aug 07, 2007

Time:: 13:50

The CSS method I use is:

input[disabled], input[readonly], select[disabled], select[readonly], checkbox[disabled], checkbox[readonly], textarea[disabled], textarea[readonly]
{
background-color: #dcdcdc;
border: #3532ff 1px solid;
color: #000000;
cursor: default;
}

ascemilas

Date:: May 23, 2008

Time:: 21:55

css textboxt ınput (textfield) style - examples - -
http://www.css-lessons.ucoz.com/textbox-...

maryankacharaba

Date:: Jun 01, 2010

Time:: 11:38

input[disabled], input[readonly], select[disabled], select[readonly], checkbox[disabled], checkbox[readonly], textarea[disabled], textarea[readonly]
{
background-color: #dcdcdc;
border: #3532ff 1px solid;
color: #000000;
cursor: default;
}

Doesn't work in IE

dddd

Date:: Jul 23, 2010

Time:: 03:19

http://www.quirksmode.org/css/contents.h...

IE sucks

gem

Date:: Aug 02, 2010

Time:: 12:53

This works in IE

[disabled] {
background-color: #dcdcdc;
border: #3532ff 1px solid;
color: #000000;
cursor: default;
}

microsoft

Date:: Aug 13, 2010

Time:: 03:50

NO DOES NOT WORK !!!:

[disabled] {
background-color: #dcdcdc;
border: #3532ff 1px solid;
color: #000000;
cursor: default;
}

because IE SUCKS!!!

you must set css class for disabled elements
but ex:

.disabled {
background-color: #dcdcdc;
border: #3532ff 1px solid;
color: #000000;
cursor: default;
}

but color: #000000; in IE doesn't work
ie suks!!!

dwidob

Date:: Oct 13, 2010

Time:: 15:34

Ie will work if you add this doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd&qu...

and use input[disabled], input[readonly]{
.....
}

galody

Date:: Nov 24, 2010

Time:: 04:00

Although learning CSS, but not very proficient.
http://www.seekic.com/
http://www.chinaicmart.com/

onlyab

Date:: Dec 28, 2010

Time:: 23:20

In my opinion, the fastest way to become a computer expert is to have a powerful software in your PC, tuneup360 is such a software, have it in your computer, you can handle all the problems by yourself.

Question Answered

This question has been closed, and points have been rewarded to the following experts:

rcastagna:	50
xarcus:	25

You're welcome however to comment or give additional information or if you wish, you have the ability to write a Tutorial in the Tutorial Area.

Answer this Question

New User

Email:
Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:

Forgot Your Password?

No tutorials have been submitted yet. Want to be the first?

Answer this Question

New User

Email:
Upon submission of this form, you will automatically be registered as a Quomon user and we will send your login information to this address

Registered User

Username:

Password:

Forgot Your Password?

Questions
whats the best food to eat during midnight?
How to identify the tiffany jewelry? www.tffanycheapmall.com.
Send an email alert to each user of the php application based on criteria
How I Increased My AdSense Earnings?
how to choose the lady dress ?
How can I fulfill the minimum requirement to make your computer support 3D?