Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

using single style class for enabled and disabled button

Tags:

css

button

I have a button which is using a class formBtn

in css

.formBtn {color:#fff; background-color:#518ACD; border-color:#ccc #000 #000 #ccc; font-    size:11px; font-weight:bold;}

in HTML

<html:submit styleClass="formBtn" value="Add"/>

Suggest me something so that I can use the same class name for a disabled button and show it in a different manner (say background-color:Grey). I may be using the style class like this

in HTML

<html:submit styleClass="formBtn" value="Disabled Add" disabled="true"/>
like image 779
sij Avatar asked May 12 '11 09:05

sij


People also ask

How do I disable and enable a button 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.

How do I add a class to the disabled button?

To style a disabled element, you can use the following CSS selectors elementTag:disabled {/* CSS */} or elementTag[disabled] {/* CSS */} but as T.J.Crowder noted: it's difficult to interpret your question as to what, specifically, you want to do. It may be worth having a read of "How to Ask" for additional pointers.

How do you apply style to only those input tags which have disabled attributes to them?

You should use javascript or your templating engine to add and remove a "disabled" class to the label elements. It shouldn't be any difficult since having disabled elements already imply you are using some sort of programming with the forms.


2 Answers

Use the :disabled pseudoclass.

.formBtn:disabled { background-color: grey; } 
like image 159
goto-bus-stop Avatar answered Sep 27 '22 18:09

goto-bus-stop


[attribute=value] selector should work IE7, don't know about IE6 if you care.

.formBtn[disabled=true] { background: gray}

If you have "Disabled" word in values you could do something like:

.formBtn[value~=Disabled] { background: gray}
like image 44
Litek Avatar answered Sep 27 '22 17:09

Litek