Modifying disclosure icon in a list

[bcraun]

What's the trick to modify the disclosure icon in a list x-type? I found a few posts that describe the CSS overrides to use, but they do not work for me for some reason. The selector appears to be recognized, but the result is a solid blue box where the disclosure icon would normally be located. Here's the CSS I'm using (and the only way that I can even get the icon to change at all):


#foo.x-list .x-list-disclosure {

-webkit-mask-image: url('images/disclosure1.png') !important;

width: 24px;

height: 24px;

-webkit-mask-size: 24px 24px;

}

[bgartenmann]

Hi bcbraun!

I don't know how this is achieved "correctly", but this solution seems to work:

.x-list .x-list-disclosure {
    -webkit-mask: none;
    background-image: url('images/disclosure1.png') !important;
    background-size: 24px 24px;
    width: 24px;
    height: 24px;
}

Hope this helps

[bcraun]

Thanks bgartenmann, that did it.