Disabled buttons

20 views
Skip to first unread message

deckard

unread,
Dec 30, 2008, 8:17:02 AM12/30/08
to CSS Buttons
Hi!

CSS-Buttons is really a great CSS button 'framework'. However I am a
little disappointed that there is no way described to properly design
the button in 'disabled' state.
Is there anything planned regarding that?

Best regards

Carsten

saxan rappai

unread,
Jan 2, 2009, 12:46:25 PM1/2/09
to cssbu...@googlegroups.com
You could do it with javascript


This script just changes the CSS Class name onclick
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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.disabled {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-weight: bold;
   color: #000000;
   background-color: #666666;
   border: 1px solid #000000;
}
.enabled {
   font-family: "Times New Roman", Times, serif;
   font-size: 12px;
   font-weight: bold;
   color: #0000FF;
   background-color: #CCCCCC;
   border: 1px solid #0000FF;
}
-->
</style>
</head>

<body>
<form name="form1" id="form1" method="post" action="">
  <input type="button" name="Button" value="Button" class="enabled" onclick="this.disabled=true;this.className='disabled';"/>
</form>
</body>
</html>






--
With Best Regards

SAXAN RAPPAI

saxan rappai

unread,
Jan 2, 2009, 12:47:41 PM1/2/09
to cssbu...@googlegroups.com
This script can loop through the buttons, check which are disabled and change their class.
In this example it is activated by the "Click Me" button, but it could be done when the page is loaded.

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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
.disabled {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10px;
   font-weight: bold;
   color: #000000;
   background-color: #666666;
   border: 1px solid #000000;
}
.enabled {
   font-family: "Times New Roman", Times, serif;
   font-size: 12px;
   font-weight: bold;
   color: #0000FF;
   background-color: #CCCCCC;
   border: 1px solid #0000FF;
}
-->
</style>
<script>
function checkStatus(){
for (x=0; x < document.form1.elements.length; x++){
   if(document.form1.elements[x].disabled){
      document.form1.elements[x].className='disabled';
      }
   }
}
</script>
</head>

<body>
<form name="form1" id="form1" method="post" action="">
  <input type="button" name="Button" value="Click Me!" class="enabled" onclick="checkStatus()"/>
  <input type="button" name="Button2" value="Button" class="enabled" />
  <input type="button" name="Button3" value="Button" class="enabled" disabled />
  <input type="button" name="Button4" value="Button" class="enabled" />
  <input type="button" name="Button5" value="Button" class="enabled" disabled="disabled" />
  <input type="button" name="Button6" value="Button" class="enabled" />
</form>
</body>
</html>

dpiNYC Projects

unread,
Jan 2, 2009, 3:59:28 PM1/2/09
to cssbu...@googlegroups.com
Good Idea SAXAN RAPPAI, however, the primary direction of CSSButtons is to do styles with CSS ONLY.

saxan rappai

unread,
Jan 3, 2009, 2:20:57 AM1/3/09
to cssbu...@googlegroups.com
im sorry for the mistake..
Reply all
Reply to author
Forward
0 new messages