时间戳

首页 > 解决方案 > Bootstrap - 在活动 btn-check 上添加三角形指示器

css - Bootstrap - 在活动 btn-check 上添加三角形指示器

问题描述

我有一个 Bootstrap 5 应用程序。在这个应用程序中，我在一个组中有三个不同大小的按钮。按钮组定义如下：

<div class="btn-group d-flex">
  <button class="btn btn-info py-4">Sunday</button>
  <button class="btn btn-info py-4">Monday</button>
  <button class="btn btn-info py-4">Tuesday</button>
</div>

当我选择其中一个按钮时，我可以看到应用了以下 CSS 类：

.btn-check:focus + .btn-info, .btn-info:focus

当用户选择其中一个按钮时，我想在按钮上应用一个居中的“三角形”。我的问题是，如何在具有焦点的按钮上添加居中三角形指示器？

为了演示，此时，我的按钮如下所示：

+-------------+
| Day of Week |
+-------------+

However, I when a button is selected, I want them to look like this:

+------^------+
| Day of Week |
+-------------+

标签： csstwitter-bootstrap

解决方案

你可以试试这个：

我只是在添加向上箭头的按钮上使用了 after。

.btn-info{
  

    border-top:1px dashed black;
      border-bottom:1px dashed black;
      border-right:1px dotted black;
      border-left:1px dotted black;
      position:relative;
      z-index:0;
      background-color:white;
padding:5px;
}
.btn-info:focus-within::after{
  content:'^';
  position:absolute;
  height:5px;
  width:5px;
  bottom:100%;
  left:50%;
  background:white;
  padding-bottom:5px;
}
<div class="btn-group d-flex">
  <button class="btn btn-info py-4">Sunday</button>
  <button class="btn btn-info py-4">Monday</button>
  <button class="btn btn-info py-4">Tuesday</button>
</div>

推荐阅读