Угловой md-переключатель. Цвет md-thumb не отображается правильно при переключении переключателя

0

Коммутатор md при переключении в браузере Safari отображает желтый раздел в секции md-thumb коммутатора.

Изображение 174551

Переключатель должен быть только синим цветом и не иметь желтого цвета. Он становится желтым после включения или выключения переключателя. Другой браузер отлично справляется с этим переключателем. md-bar в порядке, но "md-thumb" - это желтый цвет. Я попытался установить все на синий, я использую...

МЕНЬШЕ

md-switch .md-thumb {
background-color: #29b6f6 !important;
color: #29b6f6 !important;
}

md-switch.md-checked .md-thumb {
background-color: #29b6f6 !important;
color: #29b6f6 !important;
}

md-switch[disabled] .md-thumb {
background-color: #29b6f6 !important;
color: #29b6f6 !important;
}

HTML

<md-switch ng-model="orgAdminSwitch" class="md-primary" ng-change="orgAdminChanged(orgAdminSwitch)" ng-show="isAdmin" aria-label="Org Admin Switch" style="float: right;"></md-switch>

Но это только затуманило желтый цвет. Желтый был по-прежнему видимым, и это происходит только в Safari, когда переключатель переключается или нажимается для переключения. Любая идея о том, как удалить это?

  • 0
    Пожалуйста, не вандализируйте ваши сообщения. После того, как вы разместили вопрос, вы лицензировали контент для сообщества Stack Overflow в целом (по лицензии CC-by-SA). Если вы хотите удалить это сообщение из своей учетной записи, см. Каков правильный маршрут для запроса на отключение? ,
Теги:
less
safari

1 ответ

0
Лучший ответ

Я нашел работу по этой проблеме. Если вы установите display: none на md-switch.md-thumb: before и md-switch.md-ripple-container он остановит сбой цвета. Вы будете терять пульсацию при переключении переключателя, но больше не будет этой комбинации цветов. Сама проблема связана с тем, что разные цвета проникают и объединяются, чтобы сделать этот желтый цвет. Это проблема только в браузере Safari, но это простое решение и решит проблему во всех браузерах.

Код будет выглядеть так:

md-switch .md-thumb: before {
display: none;
}

md-switch .md-ripple-container {
display: none;
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню