Thursday, December 20, 2007

Reference: What we can do to style disabled input elements in IE6

.. Not a lot, by the looks of things. Here's one example of what can be done though; it involves manually adding a class to all disabled form elements...

if nothing else, it allows the styling of the background colour and changing the font-size, weight etc... Anyway, here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Styling a disabled input element in IE6</title>

<style type="text/css">

input.disabled-form-control {
background:#eee;
font-weight:bold;
color:#000;
cursor:default;
}

/*
you can also try things like:

border:1px solid #000;
font-size:110%;
text-align:center;

etc..

*/

</style>




</head>

<body>
<fieldset>
<label for="fein-input">Profile FEIN :</label>
<input type="text" id="fein-input" disabled="disabled" class="disabled-form-control" value="FEIN-value-goes-here" />

<label for="dba-input">DBA :</label>
<input type="text" id="dba-input" disabled="disabled" class="disabled-form-control" value="DBA-value-goes-here" />
</fieldset>

</body>

</html>


For a far more detailed discussion on the subject, you can also look at these sites:
http://www.456bereastreet.com/lab/styling-form-controls-revisited/disabled/#ie6-xp
http://www.askthecssguy.com/2007/05/shawn_asks_the_css_guy_about_s_1.html

0 comments:

Blog Archive

About Me