Как переопределить унаследованные стили :focus-visible в компоненте чат-бота? ⇐ CSS

[Anonymous]

Я интегрирую чат-бота в родительский веб-сайт, над которым у меня нет контроля CSS. На родительском сайте есть правила CSS, которые применяют тень к элементам, когда они находятся в фокусе (с использованием :focus-visible). Эти стили влияют на элементы ввода моего чат-бота, в частности, добавляют нежелательную тень.


Я попытался переопределить эти стили, используя следующий CSS, но безуспешно:

Код: Выделить всё

.message-input:focus {
outline-color: red !important;
box-shadow: none !important;
}

.message-input:focus:not(:focus-visible) {
outline: 0 !important;
box-shadow: none !important;
}

.v-text-field {
outline: 0 !important;
box-shadow: none !important;
}

Вот соответствующая часть моего кода шаблона Vuetify 3 для элемента ввода:

Код: Выделить всё

mdi-send

Может ли кто-нибудь подсказать, как можно успешно удалить или переопределить эти унаследованные стили box-shadow из CSS родительского веб-сайта? Я особенно ищу решение, которое хорошо работает с компонентами Vuetify 3.

Подробнее здесь: https://stackoverflow.com/questions/784 ... -component