Vue中如何修改下拉按钮轮廓？解决二次点击灰色轮廓问题

你遇到的灰色轮廓是浏览器默认的焦点样式，按钮被点击后会获得焦点，从而触发这个默认样式。可以在现有CSS中添加:focus状态的样式来移除它：

.dropdown ::v-deep .dropdown-toggle {
    color: black;
    background-color: white;
    box-shadow: none;
    &:after {
        display: none;
    }
    &:hover {
        background: green;
        color: white;
        border-color: transparent;
    }
    /* 添加这部分移除焦点轮廓 */
    &:focus {
        outline: none;
        /* 若需要清除Bootstrap自带的focus阴影，可保留此行 */
        box-shadow: none;
    }
}

如果要兼顾可访问性（不建议完全移除焦点提示），可以将焦点样式改为低干扰的自定义样式，比如：

&:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

内容的提问来源于stack exchange，提问作者FreeHuman jen