Element plus下拉框el-dropdown有黑框框怎么取消？

前言

Element plus下拉框有黑框框怎么取消？

解决前：

解决后：

分析

        查看样式发现是focus-visible的问题，看网上说是他更新了版本，加了聚焦功能，可能在某些地方是有意义的，但是在我这个模块，这是没意义的就想去掉他，解决方法也很简单，看下面。

:focus-visible {
    outline: -webkit-focus-ring-color auto 1px;
}

 解决方法：

        在说解决方法前，请你思考一下你是打算只是针对当前模块取消掉这个黑框，还是打算整个项目都取消掉？因为这个涉及到一个样式污染的问题。

        如果你打算在整个项目取消掉这个黑框，就用下面的方法一 ，如果你只是打算在当前这个模块下取消黑框而其他的下拉框不受影响，你就用方法二。

方法一：

        在一个全局样式表中添加下面这个样式 “.el-tooltip__trigger”  是官方下拉框的样式名，通过它能选择到这个focus-visible，然后取消掉，因为是官方的样式名，所以在一个全局样式表中去使用就会选择到所有的下拉框，从而取消掉全部的下拉框的黑框。

注意的是  .el-tooltip__trigger  p和t之间是2个下划线，手打的同学可要注意了，错了可选中不到正确的东西，我就是没注意看哈哈。

.el-tooltip__trigger:focus-visible {
    outline: unset;
} 

/*或者是下面这个*/

 .el-tooltip__trigger:first-child:focus-visible {
    outline: unset;
} 

方法二

        追加一个样式给这个下拉框的元素，通过那个样式去选中focus-visible 从而去取消 outline。这样哪个下拉框引用了这个样式，哪个下拉框就会被取消掉黑框。

        *值得注意的是你并不能直接给 <el-dropdown> 设置class，这样是无效的，因为他那个黑框是依附在 <el-dropdown> 内的的第一个元素上，你要给里面的第一个元素设置这个样式才生效，这个也是我尝试出来的。

css

.custom-dropdown:focus-visible {
    outline: unset;
}