Sencha Touch List Custom Disclosure Icon

Question

I have custom icon to be displayed as disclosure icon for list component. I did CSS to do. My icon color is gray. It is displaying as blue color.

My CSS:

.myList .x-list-disclosure
{
    width:48px !important;
    height:48px !important;
    top:0px !important;
    margin:1em 0 0 0 !important;
    background-image:none !important;
    color:transparent !important;
    -webkit-mask-box-image:url('../resources/images/next.png') !important;
    -webkit-mask:none !important;
}

.x-list .x-list-disclosure:before {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  content:'';
  font-family:$font-family;
  color:transparent;
  font-size:48px;
  text-align:center;
  line-height:48px;
  text-shadow:none !important;
}

Question: what is the reason my icon is displaying blue color (even it is light gray color)
What am I wrong with CSS which I have used.

Answer 1

This is because, in Sencha background-color of .x-list .x-list-disclosure class is #006bb6. And when you are using -webkit-mask-box-image , it is being transparent showing the background-color ie blue instead light gray. So if you wish to change the color of the icon, do this:

.myList .x-list-disclosure {
    background-color: grey !important;
}

I hope, my explanation satisfies your query.