VueJS：如何删除 Aloglia 搜索输入字段中的轮廓

Question

我正在使用 Algolia 的 Algolia 搜索小部件 (VueJS)，一切正常，但在焦点上，搜索输入字段显示了一个我目前无法删除的不需要的内边框（轮廓）。

我不能直接在 ais-search-box 元素上定义 'outline:none;'，因为那没有效果（它被替换在 DOM 我认为是原因）。

我怎样才能摆脱这个内部 border/outline？

我的代码是：

<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>

Answer 1

当我在 Vue.js 项目中使用 PrimeVue 时，我遇到了一些类似的问题。大多数组件在渲染期间在 DOM 中被替换。我的方法是在呈现后识别此元素的类型或class。然后我给它 parent 一个 class 并在我的主要 vue-file.

中构造我的 CSS 非作用域

如果您将 parent 设为 class shadow，您的 css 可能如下所示：

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

VueJS：如何删除 Aloglia 搜索输入字段中的轮廓

VueJS: How to remove outline in Aloglia Search input field

vue.js

algolia