CODEWITHSUNDEEP
javascripthtmlcssonfocus
eugene_prg
eugene_prg

Reputation: 1168

How to Override Inherited :focus-visible Styles in a Chatbot Component?

I am integrating a chatbot into a parent website over which I have no CSS control. The parent site has CSS rules that apply box-shadow to elements when they are focused (using :focus-visible). These styles are affecting the input elements of my chatbot, particularly adding unwanted box-shadow. enter image description here

I attempted to override these styles using the following CSS, but it has not been successful:

.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;
}

Here's the relevant part of my Vuetify 3 template code for the input element:

<div class="message-input-container">
  <v-text-field v-model="newMessage" label="Type a message..." class="message-input" @keydown.enter="sendMessage" ref="messageInput"></v-text-field>
  <v-btn icon class="send-button" @click="sendMessage">
    <v-icon>mdi-send</v-icon>
  </v-btn>
</div>

Could anyone suggest how I might successfully remove or override these inherited box-shadow styles from the parent website's CSS? I'm particularly looking for a solution that works well with Vuetify 3 components.

Upvotes: 0

Views: 34

Answers (0)

Related Questions