VueJS: How to remove outline in Aloglia Search input field

I'm using the Algolia search widget (VueJS) from Algolia, and everything works fine, but on focus the search input field displays an unwanted inner border (outline) that I cannot remove so far.

I cannot directly define 'outline:none;' on the ais-search-box element, because that has no effect (it's being replaced in the DOM I think is the reason).

How can I get rid of this inner border/outline?

My code is:

<ais-search-box class="shadow appearance-none border rounded px-3 text-gray-700 mb-2 leading-tight focus:outline-none focus:shadow-outline" placeholder="Search" autofocus>
                        
                        <div slot="submit-icon">
                            <i class="fas fa-search text-xl p-2 text-blue-400"></i>
                        </div>
                        
                    </ais-search-box>

Solution

I have some similar issues, when i work with PrimeVue in my Vue.js project. Most of the components are replaced in the DOM during render. My approach is to identify the type or class of this element after it is rendered. Then I give it´s parent a class and construct my CSS non scoped in my main vue-file.

If you give your parent the class shadow, your css could look like this:

.shadow input[type="text"]:focus {
   outline: none;
}