Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I disable a input button using CSS? 1

Status
Not open for further replies.
FancyPrairie

FancyPrairie

Programmer
Oct 16, 2001
2,917
US
I have an unordered list with several sets of buttons (sprites). I want to be able to setup a style to handle the disabled effect for all buttons. Each set of buttons (sprites) contains an enabled state and a disabled state. My style sheet looks something like the following and it works...sort of. The line in red works but only for btn1.

ul.MyNavMenu {list-style-type: none; display: inline; ...}

ul.MyNavMenu input[type="button"][disabled] {background-position: 0 -16px background-image:url(btn1.png)...}


ul.MyNavMenu li input:Btn1 {background-image:url(btn1.png) ...}
ul.MyNavMenu li input:Btn2 {background-image:url(btn2.png) ...}
ul.MyNavMenu li input:Btn3 {background-image:url(btn3.png) ...}

What is the syntax so that I can get it to work for all of the buttons? I have tried this syntax (with no luck)

ul.MyNavMenu input[type="button"][disabled].btn1 {...}


 
Sort by date Sort by votes
I'll leave the background positioning to you

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
What is the syntax so that I can get it to work for all of the buttons? I have tried this syntax (with no luck)
Click to expand...

That depends on what your button html looks like.

This:

Code: 
ul.MyNavMenu input[type="button"][disabled].btn1 {...}

Would apply to an input with a type equal to button that is disabled and has a class of btn1 (in lowercase) and that exists inside an unordered list with a class of MyNavMenu.


The context your buttons are in determines the proper css to target them.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
vacunita,

Your syntax is what I would expect it to be. But that doesn't work. Or, am I missing something?
 
Upvote 0 Downvote
As I said before, and feherke has also suggested: show us the HTML , it is important in targeting your buttons.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Thanks for verifying that it works. Obviously, I've got something wrong. Here is my CSS code
Code: 
ul.MyNavMenu 
 {
    list-style-type: none;
    display: inline;
    font:normal 11px Tahoma;
    width:116px;
    height:27px;
    margin: auto;
 }
 

ul.MyNavMenu li  
{
    float: left; 
    margin-top: 4px;
    width: 20px;
}

ul.MyNavMenu input
{
    cursor: pointer;
    width: 20px;
    height: 16px;
    background-color: transparent;
}

ul.MyNavMenu li input.btn1 
{
    background-position: 0 0;
    background-image:url(btn1.png); 
    background-repeat: no-repeat;
}

ul.MyNavMenu li input.btn1:hover 
{
    background-position: 0 -16px;
    background-image:url(btn1.png);
    background-repeat: no-repeat;
}

ul.MyNavMenu li input[type="button"][disabled].btn1 
{
    height: 16px; 
    background-color: transparent; 
    border: 0px solid transparent; 
    background-position: 0 -32px;  
    background-image:url(btn1.png);
    background-repeat: no-repeat;
}

Here is my html code
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
    <title></title>
    <link href="MyCssFile.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <ul class="MyNavMenu" style="overflow: hidden;">
        <li>
            <input id="btn1ID" class="btn1" type="button" />
        </li>
    </ul>
</body>
</html>
 
Upvote 0 Downvote
Your button isn't disabled, so the disabled css will not apply.





----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Sorry, I forgot to mention that. I set it to disabled via code. I know that portion is ok because it works if I use this syntax: ul.MyNavMenu li input[type="button"][disabled] However, the problem with that syntax is that it effects all of my buttons. Consequently, the image for all of my disabled buttons is set to the image assigned to btn1.

The syntax you specified (which is what I also thought it should be) ul.MyNavMenu li input[type="button"][disabled].btn1 should apply to just btn1. I would then use the same syntax for btn2 ul.MyNavMenu li input[type="button"][disabled].btn2. As well as the rest of the buttons. But, when I add .btn1 to the end of the definition, it fails. That is, the css is not applied to btn1 when it is disabled.
 
Upvote 0 Downvote
I guess the question is how you are disabling the buttons.

This works for me:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
    <title></title>
    <style type="text/css">
	ul.MyNavMenu 
 {
    list-style-type: none;
    font:normal 11px Tahoma;
    width:116px;
    height:27px;
    margin: auto;
    border:2px solid #464646;
    background-color:#A6A6A6;	
    width:200px;
    height:40px;	

 }
 

ul.MyNavMenu li  
{
    float: left; 
    margin-top: 4px;
    width: 20px;
}

ul.MyNavMenu input
{
    cursor: pointer;
    width: 20px;
    height: 16px;
    background-color: transparent;
}

ul.MyNavMenu li input.btn1 
{
    background-position: 0 0;
    background-image:url(btn1.png); 
    background-repeat: no-repeat;
}

ul.MyNavMenu li input.btn1:hover 
{
    background-position: 0 -16px;
    background-image:url(btn1.png);
    background-repeat: no-repeat;
}

ul.MyNavMenu li input[type="button"][disabled].btn1 
{
    height: 16px; 
    background-color: transparent; 
    border: 0px solid transparent; 
    background-position: 0 -32px;  
    background-image:url(btn1.png);
    background-repeat: no-repeat;
}	


    </style>
</head>
<body>
    <ul class="MyNavMenu" style="overflow: hidden;">
        <li>
            <input id="btn1ID" class="btn1" type="button" disabled />
        </li>
	<li>
            <input id="btn2ID" class="btn1" type="button"/>
        </li>
	<li>
            <input id="btn3ID" class="btn1" type="button" onclick="document.getElementById('btn2ID').disabled=true;"/>
        </li>
    </ul>
</body>
</html>

As you can see, btn1 while disabled will bot get the styling applied,  however btn2 will receive the styling after it is disabled by clicking on btn3.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
I'm not being clear and I appologize. The code I posted was my attempt to simplify what I was trying to do so it would be easier for you to test it. But I confused you as to what I am attempting to do.

Each of the sets of buttons (sprite) contains 3 buttons arranged vertically. Normal state (background-position 0 0), hover state(background-position 0 -16px), and disabled state (background-position 0 -32px). I have 5 sets of button to allow the user to navigate through a recordset. They are goto first record (|<), previous(<), next(>), last(>|), and new record (>*).

I currently have a class defined for each button. And a disabled class for each button. For example, btnFirstRecord is assigned to the class "clsFirstRecord" and a class named "clsFirstRecordDisabled" also exists. So, when I disable the button I add the string "Disabled" to the name of the class. And remove the string "Disabled" from the class name when the button is enabled.

Being new to CSS, I wasn't aware of a way to use CSS to apply styles to disabled elements. When I discovered this feature I wanted to change my code to handle it via CSS rather than changing the class name assigned to the button.

Now, the problem. Since each set of buttons are assigned different images, I can't use one style defintion to handle all of the different sets of buttons since I must specify the url for each of the button images. But if the syntax that you specified works, than I can create a style definition for each of the five buttons. For example,
Code: 
ul.MyNavMenu li input[type="button"][disabled].clsFirstRec {...} 
ul.MyNavMenu li input[type="button"][disabled].clsPrevRec {...} 
ul.MyNavMenu li input[type="button"][disabled].clsNextRec {...}
ul.MyNavMenu li input[type="button"][disabled].clsLastRec {...} 
ul.MyNavMenu li input[type="button"][disabled].clsNewRec  {...}

My unordered list would look like this:
Code: 
    <ul class="MyNavMenu" style="overflow: hidden;">
        <li>
           <input id="btn1ID" class="clsFirstRec" type="button" />
        </li>
        <li>
           <input id="btn2ID" class="clsPrevRec" type="button" />
        </li>
        <li>
           <input id="btn3ID" class="clsNextRec" type="button" />
        </li>

        <li>
           <input id="btn4ID" class="clsLastRec" type="button" />
        </li>

        <li>
           <input id="btn5ID" class="clsNewRec" type="button" />
        </li>

    </ul>

But the syntax of adding the .NameOfTheClass to the end of "ul.MyNavMenu li input[type="button"][disabled]" does not seem to work.

 
Upvote 0 Downvote
I think you are missing the point of the disabled selector in the css definition.



Code: 
input[type="button"].firstButton{ color:red; }
input[type="button"][disabled].firstButton{ color:blue; }
...


<input type="button" class="firstButton" disabled value="Im Disabled">
<input type="button" class="firstButton" value="Im NOT Disabled">

As you can see there, there's no need to change the classes. Merely change the definition for the state.

The code above will apply to the input that is disabled the red color for the text, while the input that is not disabled gets a blue color.


In your case all you want to do is have two CSS definitions for your button states disabled and not disabled for the same class. Once you disable the button, the disabled definition should be applied.

There's no need to alter the class name by adding disabled, the selector changes the css for you.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Also make sure the selector is compatible with any browser you intend for it to work with.

I do not think the disabled selector is IE8 compatible.

I have found that selectors, although useful, can pose some annoying cross-browser issues, and although cute and state of the art might not be the best way to tackle some issues.

Darryn Cooke
| Marketing and Creative Services
 
Upvote 0 Downvote
By the way,

the answer to
How do I disable a input button using CSS?
Click to expand...
is ...








... You can't

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum
 
Upvote 0 Downvote
I appreciate you all taking the time to look at my problem and your suggestions. It appears what I want to do can't be done the way I was hoping.

Because this is a general purpose routine I'm creating, I don't know what the style definitions are for when the tag is enabled or disabled. And I do not want to force other programmers on our team to use a specific style. My routine simply handles processing the data. It doesn't care how the buttons look or where they are located. Consequently, when my routine disables a button (i.e. no next record) I was hoping the disable selector would take care of handling the styling of the button. But, since it appears it can't, I have to assume that the developer has a style defined for the disabled state and its class name is the same as the class name when it is enabled with the string "disabled" appended to the class name.

Although I can create a disable selector in IE8 for an input tag of type button, it appears that it will apply to all input tags of type button. I thought I could create a css for a disable selector that performs in the same manner as the hover selector.
 
Upvote 0 Downvote
Consequently, when my routine disables a button (i.e. no next record) I was hoping the disable selector would take care of handling the styling of the button.
Click to expand...

Yes, that's what it does.

But, since it appears it can't, I have to assume that the developer has a style defined for the disabled state and its class name is the same as the class name when it is enabled with the string "disabled" appended to the class name.
Click to expand...

I'm not sure I follow. Why are you changing the classes when its disabled? Again if the designer sets the selector for a specific input that is disabled it will be applied to it as soon as the input is disabled.

But the syntax of adding the .NameOfTheClass to the end of "ul.MyNavMenu li input[type="button"][disabled]" does not seem to work.
Click to expand...

Using your own example, this works for me as expected, when a button is disabled, the specific style associated is applied:

Code: 
<html>
<head>
<style type="text/css">
ul.MyNavMenu li input[type="button"][disabled].clsFirstRec {color:red;} 
ul.MyNavMenu li input[type="button"][disabled].clsPrevRec {color:blue;} 
ul.MyNavMenu li input[type="button"][disabled].clsNextRec {color:#224466;}
ul.MyNavMenu li input[type="button"][disabled].clsLastRec {color:#664422;} 
ul.MyNavMenu li input[type="button"][disabled].clsNewRec  {color:#226644;}


</style>
</head>
<body>

    <ul class="MyNavMenu" style="overflow: hidden;">
        <li>
           <input id="btn1ID" class="clsFirstRec" type="button" value="First" disabled />
        </li>
        <li>
           <input id="btn2ID" class="clsPrevRec" type="button" value="Previous" />
        </li>
        <li>
           <input id="btn3ID" class="clsNextRec" type="button" value="Next" />
        </li>

        <li>
           <input id="btn4ID" class="clsLastRec" type="button" value="Last" />
        </li>

        <li>
           <input id="btn5ID" class="clsNewRec" type="button" value="New" disabled />
        </li>

    </ul>

<body>

This would work also if you were to disable the buttons using javascript such as buttonObj.disabled=true or something to that effect.

The CSS should be defined as such from the design phase.
There's no need for you to know the classes or anything else beyond just setting the button's state.









----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
875
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
463
pmonett
pmonett
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
449
3esolar
3
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
384
PeDa
PeDa
Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
144
Alt255
Alt255

Part and Inventory Search

Sponsor

Back
Top