Monday, January 07, 2008

Disabled input buttons in Sakai

In HTML you can disable the ability for an input button to be clicked typically you just add the disabled attribute to a button with some value. Eg:

<input value="Click" disabled="true" type="button">

Now in Sakai if you do this for an active button (default one for a form) then under Firefox the button loses some of it's 3D look but remains blue (default default button colour). IE always renders a disabled button grey (allowed in W3C spec). To get a consistent look across the browsers and make it clearer to a Firefix user that the button is disabled you have to have the disabled attribute equal disabled:

<input class="active" value="Click" disabled="disabled" type="button">

the button is made grey by the following CSS (from /reference/library/src/webapp/skin/default/tool.css)

.act .active[disabled="disabled"] { color:grey }