Пользовательский значок раскрытия сенсорного списка Сенча

Question

У меня есть пользовательский значок, который будет отображаться как значок раскрытия для компонента списка. Я сделал CSS, чтобы сделать. Мой цвет значка серый. Он отображается синим цветом.

Мой 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;
}

Вопрос: по какой причине моя иконка отображается синим цветом (даже светло-серым)
Что я не так с CSS, который я использовал.

Answer 1

Это потому, что в Сенче background-color из .x-list .x-list-disclosure класс #006bb6. И когда вы используете -webkit-mask-box-image, он прозрачен, показывая цвет фона, т.е. синий вместо светло-серого. Поэтому, если вы хотите изменить цвет значка, сделайте следующее:

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

Надеюсь, мое объяснение удовлетворит ваш запрос.