• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 961
  • Last Modified:

different styles of enabled and disabled buttons

Is it possible to give different styles for enabled and disabled buttons using only css

eg.

<input type="button" value="Some value"  class="button_class" />    -> displays button with background red.

<input type="button" value="Some value"  disabled="disabled" class="button_class" />    -> displays button with background grey

thanks in advance
kiranvj
0
Kiran Paul VJ
Asked:
Kiran Paul VJ
  • 3
  • 3
1 Solution
 
TNameCommented:

In theory you could use attribute selectors. Unfortunately they won't work in IE6.
http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors

Try this in FF:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
input { width:50px; }
input[disabled]{ width:200px; }
</style>
</head>
<body onClick="document.getElementById('btn1').disabled='';">
 <input type="button" id="btn1" disabled="disabled" value="Test">
</body>
</html>



0
 
TNameCommented:
BTW, I think that for IE you could use CSS expressions
   http://msdn2.microsoft.com/en-us/library/ms537634.aspx
but (at least for me)  these css expressions will not work with js disabled (they are js, after all), so then why not use javascript...

0
 
Kiran Paul VJComputer EngineerAuthor Commented:
hi TName,

thanks for the info, will update you once I check it.

Kiranvj
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Kiran Paul VJComputer EngineerAuthor Commented:
hi TName,

I checked the method in your first post, the problem is that if there are buttons and textbox, the style will be applied to both. I want the style to apply only to the button.
0
 
TNameCommented:
>I want the style to apply only to the button.

No problem (at lest in browsers that support attribute selectors),  you can use multiple attribute  selectors, e.g. to only address disabled *buttons* you could specify:

    input[disabled][type="button"] { width:400px; }



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
   input { width:100px; }
   input[disabled][type="button"] { width:400px; }
</style>
</head>
<body onClick="document.getElementById('btn1').disabled=''; document.getElementById('txt1').disabled='';">
 <input type="button" id="btn1" disabled="disabled" value="Test">
 <input type="text" id="txt1" disabled="disabled" value="Some text">
</body>
</html>
0
 
Kiran Paul VJComputer EngineerAuthor Commented:
Thanks TName.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now