Question

I want to change the default triangle toggle icon to ‘+’ / ‘-‘

.legendFieldSet {
    border-width: 0px; 
    margin-bottom:10px;
}

.legendFieldSet .x-tool-toggle{
    background-position: 0 -255px !important; /*the minus sign*/
}

.legendFieldSet .x-panel-collapsed .x-tool-toggle{
    background-position: 0 -240px !important; /*the plus sign*/
}

(Demo here.)

What’s wrong with what I have?

Answer 1

The correct way to do it is this:

.legendFieldSet .x-tool-toggle {
    background-position: 0 -255px !important; /*the minus sign*/
}

.legendFieldSet.x-fieldset-collapsed .x-tool-toggle {
    background-position: 0 -240px !important; /*the plus sign*/
}