引导按钮 CSS 更改不适用于 :active 选择器答案

【问题标题】：Bootstrap Button CSS changes not working for :active selector引导按钮 CSS 更改不适用于 :active 选择器
【发布时间】：2017-01-21 19:42:26
【问题描述】：

我正在使用引导程序 3.3.7 按钮，并且希望在鼠标聚焦、悬停或单击按钮时按钮保持相同的颜色。

<button class="btn btn-default delete-btn">Delete</button>

这里是我为我的 CSS 选择器修改背景颜色的地方：

.delete-btn:hover, .delete-btn:focus, .delete-btn:active {
    background-color: white;
}

这适用于焦点或悬停事件。

但是，当鼠标单击按钮时，它会变为默认的灰色。有什么想法我在这里想念的吗？挠头……

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

Bootstrap 样式表有这组选择器：

.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover

.btn-default:active:focus 和 .btn-default:active:hover 比只有一个伪类的选择器更具体。

您需要使您的选择器同样具体：

.delete-btn:hover, .delete-btn:focus,
.delete-btn:active:hover, .delete-btn:active:focus, {
    background-color: white;
}

【讨论】：

【解决方案2】：

尝试仅 .delete-btn 的选择器 .btn.btn-default.delete-btn 插入并使用重要。

.btn.btn-default.delete-btn:hover, .btn.btn-default.delete-btn:focus, .btn.btn-default.delete-btn:active {
     background-color: white !important;
}

否则，检查浏览器上的元素以找到灰色并将整个 css 规则替换为白色。

否则，请检查您的 javascript 中是否有问题并将您的颜色规则替换为点击事件。

【讨论】：

【解决方案3】：

尝试在代码末尾添加重要信息，如下所示：background-color: white!important;。

【讨论】：

【解决方案4】：

在您的样式中使用 !important 来替换引导程序的默认样式

【讨论】：

【解决方案5】：

在您的 css 属性之后添加 !important ，将引导默认 css 替换为您的 css 并优先考虑您的 css 为了避免盒子阴影，请使用 box-shadow。添加这个CSS：---

.delete-btn:hover, .delete-btn:focus, .delete-btn:active {
                background-color: white !important;
                box-shadow: none !important;
            }

【讨论】：