How do you target the disabled state of a submit button?

Question

I have looked all over and can't figure this out: how do you target the disabled state submit button in css?

For example: How would I target and style this button:

<input value="Validate" disabled="disabled" type="submit"/>

Answer 1

input[disabled='disabled'][type='submit']
{
...
}

doesn't work in IE 6 but should in all other browsers. Reference

There is also the :disabled pseudo-class but that's not supported in IE at all.

Styling disabled elements is difficult, as they sometimes have properties that can't be overridden. This article shows what stylings apply in which browsers: Styling disabled form controls with CSS

Answer 2

There is no pseudo class defined in CSS for a disabled state.

My guess is to use JQuery to change the CSS class for the disabled buttons.

Code for JQuery:

<script language="javascript">
    $('input[type=button]').each(function () {
        if ($(this).attr('disabled') == true)
        {
            $(this).addClass('disabled');
        }
    });
</script>

Add a style element 'disabled'.

Answer 3

One way I can think of for this is by setting the class of the button to disabled and then using "input.disabled" to specify the appropriate CSS. Would that work in the context you are doing this?

Answer 4

CSS3 adds the :disabled pseudoclass, which exactly does what you want.

input:disabled {
 /*Disabled styles for input elements here*/
}

As this page shows all major browsers (except IE8) support this tag, so it seems unusable yet (unless you do not need IE support)

Answer 5

You can use:

    input[disabled=disabled][type=submit] {
        background:green;
    }

Works on Firefox and is reportedly good on all but IE6. But I haven't personally tested this kind of combo selector.

PS: A more robust, cross-browser method, using jQuery...

$("input[disabled=disabled][type=submit]").css
({
    'background':   'yellow',
    'color':        'blue'
});