+ Start a Discussion
anukarthi_nimmalaanukarthi_nimmala 

Applying Styles to Apex:cpmmandbutton

HI ,

 

I have an apex:command button in my visualforce page.Now i want to change the background color of the button by using inline css .But iam not able to change it.If i use external css its working ,but i want to set standardstylesheets=true and change the background color of the button.So please tell me how to change the background color of the apex:command button

 

My code is as follows...

 

<apex:page >
 
 
 <style>
.contentStyle { font-size:12px; }
.buttonStyle { width:100%; background-color:green; text-align:center; padding-top:4px; }
.activeTab {background-color: #B7A752; color:white; background-image:none}
.inactiveTab { background-color: #F3F3EC; color:black; background-image:none}
.NoRecord { font-size:11px;}
</style>

 <apex:form> <apex:commandButton action="{!save}" value="Edit" styleClass="buttonStyle "></apex:commandButton>

 </apex:form>

 
 </apex:page>

 

In this code my command btns background color not getting changed!

 

So please help me out of the issue..

 

                                                                                                                                                                               Thanks and regards,

                                                                                                                                                                                           anu...

NaishadhNaishadh

you have to use style property of command button for getting background image

 

 

<apex:commandButton value="Save" styleClass="buttonStyle" style="background:green"/>

 

 

pramod sharma 15pramod sharma 15
How to increase the button size? Is there any standard syntac for that?
Nitesh Dixit 8Nitesh Dixit 8
You can remove styleClass="buttonStyle" only style="background:green" would also work.
Rakshana Cube84Rakshana Cube84
Hi  anukarthi_nimmala,
You might have achieved that by writing inline style on the button itself style=" background: green". Even though you should know why it was not working in the CSS style class.
Get this answer if you are attempting to apply style for the command button in Vf page by CSS class, you must write !important option for each property.

Eg:
.buttonStyle { width:100% !important;
background-color:green !important;
 text-align:center; padding-top:4px !important;
 }
use this it will work perfectly