?
Solved

different styles of enabled and disabled buttons

Posted on 2007-10-18
6
Medium Priority
?
959 Views
Last Modified: 2010-08-05
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
Comment
Question by:Kiran Paul VJ
  • 3
  • 3
6 Comments
 
LVL 28

Expert Comment

by:TName
ID: 20107120

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
 
LVL 28

Expert Comment

by:TName
ID: 20107291
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
 
LVL 16

Author Comment

by:Kiran Paul VJ
ID: 20111025
hi TName,

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

Kiranvj
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 16

Author Comment

by:Kiran Paul VJ
ID: 20117192
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
 
LVL 28

Accepted Solution

by:
TName earned 2000 total points
ID: 20117756
>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
 
LVL 16

Author Comment

by:Kiran Paul VJ
ID: 20128642
Thanks TName.
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
This video teaches users how to migrate an existing Wordpress website to a new domain.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question