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

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

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 2

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'
});

Answer 3

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 4

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 5

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 6

For your exact syntax, #Brock Adam or #Pekka's answer should work, but usually, the syntax for disabled input or button is:
<input disabled type="submit"/>
With this, you could do the following to target the disabled property:
button:[disabled] {}
input:[disabled] {}
Also, because it was what I needed in my case, below can help achieve the reverse (targeting only buttons or inputs that aren't disabled):
button:not([disabled]) {}
input:not([disabled]) {}