Question

我称我的按钮一切都很酷但是点击时无法改变蓝色。

<button type="button" class="btn btn-primary">Log In</button>

.btn.btn-primary:focus {
  background-color: and here color
}

不起作用

Answer 1

悬停state优先于有效或焦点。你可以在代码片段中看到它，因为两个元素都有一个颜色变化为活动，但仅在悬停时。

.btn:active { background-color: red }
.btn.btn-primary:hover { background-color: green }

<button type="button" class="btn btn-primary">With hover</button>
<button type="button" class="btn btn-secondary">No hover</button>

要解决此问题，您需要指定顺序，并在选择器中清除。悬停选择器需要在活动选择器之前。

.btn.btn-primary:hover { background-color: green }
.btn.btn-primary:active { background-color: red }

<button type="button" class="btn btn-primary">Button</button>

Answer 2

您需要覆盖要更改的按钮的每个pseudo-selector。

如果您想避免使用!important，那么您将需要覆盖Bootstraps设置的更多选择器。为了简单起见，我在片段中对这些进行了评论。

＆＃13;

.btn.btn-primary {
  background-color: orange
}

.btn.btn-primary:active,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
  background-color: orange !important;
}

/*
.btn-primary:not(:disabled):not(.disabled).active, 
.btn-primary:not(:disabled):not(.disabled):active, 
.show > .btn-primary.dropdown-toggle {
  background-color: orange;
}
*/

＆＃13;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<button type="button" class="btn btn-primary">Log In</button>

＆＃13;

Answer 3

使用

.btn:active {
  background-color: red;
}

Bootstrap按钮焦点

3 个答案: