1

In my CSS I try to set the background image button of apex:commandButton to suit our own style.

For that I use the following style:

<style>
input.goButton{
    background-image: url('{!URLFOR($Resource.styles,'enrich-now-button-normal.png')}');
    border-style:none;
}
input.goButton:hover{
    background-image: url('{!URLFOR($Resource.styles,'enrich-now-button_rollover.png')}');
}
input.goButton:active{
    background-image: url('{!URLFOR($Resource.styles,'enrich-now-button-pressed.png')}');
}
</style>

With the following command button:

<apex:commandButton  styleClass="goButton" 
                     value="Enrich" 
                     action="{!saveEnrichmentRequest}" />

The button is displayed with the right image, although the hover and active events are not working properly and instead of displaying the right image, it displays some "gray-lite" background (of a class name btn)

Appreciate your help

2 Answers 2

1

Try to add background-position: 0 0; to every css class, because the background image position is set to the right top corner of the button (defined in the .btn css class):

input.goButton{
    background-image: url('{!URLFOR($Resource.styles,'enrich-now-button-normal.png')}');
    border-style:none;
    background-position: 0 0;
}
input.goButton:hover{
    background-image: url('{!URLFOR($Resource.styles,'enrich-now-button_rollover.png')}');
    background-position: 0 0;
}
input.goButton:active{
    background-image: url('{!URLFOR($Resource.styles,'enrich-now-button-pressed.png')}');
    background-position: 0 0;
}
0

Try adding the css !important rule to your css. e.g.

    <style>
    input.goButton{
        background-image: url('{!URLFOR($Resource.styles,'enrich-now-button-normal.png')}');
        border-style:none;
    }
    input.goButton:hover{
        background-image: url('{!URLFOR($Resource.styles,'enrich-now-button_rollover.png')}') !important;
    }
    input.goButton:active{
        background-image: url('{!URLFOR($Resource.styles,'enrich-now-button-pressed.png')}'); !important
    }
    </style>

The problem is probably that the css ordering means the SFDC css wins on the hover/active events.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .