按钮CSS样式失效：如何移除点击时的蓝色高亮？

你的问题源于Firefox的默认按钮焦点伪元素，以及Bootstrap 4内置焦点样式的优先级覆盖问题，以下是修复方案：

修改后的CSS代码 #

.btn-primary {
    background-color: #fc3e00;                       
    border: none;                                    
    border-radius: 5px;                              
    transition: background-color 0.3s ease, transform 0.2s ease; 
    color: white;                                    
    appearance: none;                                
}

/* 清除Firefox默认的焦点伪元素样式 */
.btn-primary::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.btn-primary:hover {
    background-color: #b80c09;                       
}

/* 增强选择器优先级，覆盖Bootstrap默认焦点样式 */
.btn-primary:focus, .btn-primary:focus-visible {
    outline: none !important;                        
    box-shadow: none !important;                     
    background-color: #b80c09;                       
}

.btn-primary:active {
    background-color: #b80c09;                       
    transform: scale(0.95);                           
    box-shadow: none !important;                      
}

/* 处理点击后焦点残留的情况 */
.btn-primary:active:focus {
    box-shadow: none !important;
    outline: none !important;
}

修复说明 #

1. Firefox专属处理：Firefox会给按钮自动生成::-moz-focus-inner伪元素，自带蓝色边框，必须显式清除它的边框和内边距才能去掉这个高亮。
2. 优先级增强：Bootstrap 4的.btn组件有内置的:focus样式，通过同时指定:focus和:focus-visible，确保自定义样式能覆盖Bootstrap的默认设置。
3. 焦点残留处理：点击按钮后可能会同时触发:active和:focus状态，单独添加.btn-primary:active:focus规则可以彻底清除这种情况下的高亮。

最后用Ctrl+Shift+R强制刷新页面，清除浏览器缓存，确保新CSS生效。

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