css - Bootstrap 轮廓按钮 - 单击时保持背景颜色

Question

我正在使用 Bootstrap 大纲按钮。

单击时如何保持具有背景颜色的“活动”按钮？

目前，这只发生在鼠标悬停时。

HTML

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group-vertical btn-group-toggle d-flex align-items-center justify-content-center" data-toggle="buttons">
	<button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn1" data-toggle="button" aria-pressed="false">
		btn1
	</button>

	<button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn2" data-toggle="button" aria-pressed="false">
		btn2
	</button>

	<button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn3" data-toggle="button" aria-pressed="false">
		btn3
	</button>

	<button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn4" data-toggle="button" aria-pressed="false">
		btn4
	</button>
</div>

JS文件

https://jsfiddle.net/28c0g5Lf/

标签： csstwitter-bootstrapbootstrap-4

Answer 1

为重点点击的按钮添加此代码

button:focus{
  color: #fff;
    background-color: #343a40;
    border-color: #343a40;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group-vertical btn-group-toggle d-flex align-items-center justify-content-center" data-toggle="buttons">
	<button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn1" data-toggle="button" aria-pressed="false">
		btn1
	</button>

	<button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn2" data-toggle="button" aria-pressed="false">
		btn2
	</button>

	<button type="button" class="btn btn-outline-dark btn-sm btn-block m-1 p-1" id="btn3" data-toggle="button" aria-pressed="false">
		btn3
	</button>

	<button type="button" class="btn btn-outline-dark btn-sm btn-block m-0 p-1" id="btn4" data-toggle="button" aria-pressed="false">
		btn4
	</button>
</div>

工作示例