Change Disabled Button Label Text and Its Shade Color

Ranch Hand

Posts: 1309

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I would like to set the label text color of disabled buttons when the page is loaded. I have a drafted the code but the code does not work.

How to check which buttons are disabled when loading the page and have the label text color on those buttons set?

<!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"> 
<head> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css"> 
 
</style> 
<script> 
????????
</script> 
</head> 
 
<body> 
<form name="leads_events" id="leads_events" method="post" action=""> 
<input type="button" value="Add Subject" id="addSubj" disabled="disabledButton" class="buttonDefault"/>
<input type="button" value="Edit Subject" id="editSubj" disabled="disabledButton" class="buttonDefault"/>
<input type="button" value="Property" id="property" class="buttonDefault"/>
<input type="button" value="Organization" id="organization" class="buttonDefault"/>
<input type="button" value="VR" id="vr" class="buttonDefault"/>
</form> 
</body> 
</html>

Andreanes Yosef Vanderlee

Greenhorn

Posts: 12

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

maybe you can try this:

function renderForm(frm){
if(!frm){
frm = document.forms[0];
}
for(var i=0; i<frm.elements.length; i++){
if(frm.elements[i].type == 'button' && frm.elements[i].disabled){
frm.elements[i].className = 'disabledButton';
}
}
}

add <body on load="renderForm()">

or just use css like this:
input

isabled{
BORDER-LEFT: #FFFFFF 1px solid;
BORDER-TOP: #FFFFFF 1px solid;
BORDER-RIGHT: #006699 1px solid;
BORDER-BOTTOM: #006699 1px solid;
FONT-SIZE: 1em;
FONT-WEIGHT: bold;
FONT-FAMILY: Arial, Helvetica, sans-serif;
COLOR: #006699;
BACKGROUND-COLOR: #C0C0C0;
}

It works on firefox.. *dunno with other browser..

--
Andre

JiaPei Jen

Ranch Hand

Posts: 1309

posted 13 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks Andreanes, your code works well. The code picks up the style setting when the page is loaded.

Nevertheless, only the text font, background and border colors are correctly set for the disabled button. The color of the label text for the disabled button is not picked up.

Does it mean that there is no way to change the text color on disabled buttons?

<!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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">

</style>
<script>
function setColor( frm )
{
if ( !frm )
{
frm = document.forms[0];
}
 
for ( var i=0; i < frm.elements.length; i++ )
{
if(frm.elements[i].type == 'button' && frm.elements[i].disabled)
{
frm.elements[i].className='disabled';
}
}
}
 
</script>
</head>
 
<body on load="setColor()">
<form name="form1" id="form1" method="post" action="">
  <input type="button" name="Button" value="Query Event" id="query" disabled class="enabled"/>
  <input type="button" name="Button" value="Add Subject" id="subject" class="enabled"/>
</form>
</body>
</html>

Eric Pascarello

author

Posts: 15385

posted 13 years ago