VueJS：如何在 Algolia Search 输入字段中删除轮廓答案

【问题标题】：VueJS: How to remove outline in Aloglia Search input fieldVueJS：如何在 Algolia Search 输入字段中删除轮廓
【发布时间】：2021-10-22 03:59:44
【问题描述】：

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

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

我怎样才能摆脱这个内边框/轮廓？

我的代码是：

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

【问题讨论】：

标签： vue.js algolia

【解决方案1】：

当我在我的 Vue.js 项目中使用 PrimeVue 时，我遇到了一些类似的问题。大多数组件在渲染期间在 DOM 中被替换。我的方法是在渲染后识别该元素的类型或类。然后我给它的父类一个类，并在我的主 vue 文件中构造我的 CSS 非作用域。

如果你给你的父母 shadow 类，你的 css 可能是这样的：

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

【讨论】：

是的，成功了，谢谢@Fabalance！我必须做的唯一调整是将输入字段的“类型”设置为“搜索”，因为这是 algolia 使用的。 CSS 规则是： .shadow input[type="search"]:focus { outline: none; }