Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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"/> 
like image 824
Thomas Avatar asked Jun 23 '10 10:06

Thomas


People also ask

How do I make my submit button disabled?

1.1 To disable a submit button, you just need to add a disabled attribute to the submit button. $("#btnSubmit"). attr("disabled", true); 1.2 To enable a disabled button, set the disabled attribute to false, or remove the disabled attribute.

Can you focus on a disabled button?

No, the button cannot receive focus because it is disabled. According to the W3.org specification (HTML5 version) disabled form controls must prevent click events and other interaction.

Are Disabled buttons accessible?

Bad accessibilitySometimes disabled buttons are designed in a way that they cannot be read by a screen reader (buttons are not focusable, and hence users can't reach them with a keyboard). No need to explain that users with disabilities will face problems with such behavior.

How do you make a button disabled in CSS?

To make the disabled button, we will use the Pure CSS class “pure-button-disabled” with the class “pure-button”. We can also create a disabled button using disabled attribute. Disabled Button used Class: pure-button-disabled: It is used to disable the Pure CSS button.


1 Answers

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)

like image 192
Veger Avatar answered Dec 24 '22 13:12

Veger