更改引导模式窗口中关闭按钮的颜色

问题描述 投票:0回答:5
css twitter-bootstrap
5个回答
59
投票

Bootstrap 设置颜色是这样的:

.close {
  float: right;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: .2;
}

所以你可以用这个覆盖它:

.close {
    color: #fff; 
    opacity: 1;
}

21
投票

在 bootstrap 5 中,他们有一个类,允许您将关闭按钮的颜色更改为白色。

<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>

Bootstrap 5.3 更新

从 v5.3.0 开始,

.btn-close-white
类已弃用。相反,请使用
data-bs-theme="dark"
更改关闭按钮的颜色模式。

<div data-bs-theme="dark">
  <button type="button" class="btn-close" aria-label="Close"></button>
  <button type="button" class="btn-close" disabled aria-label="Close"></button>
</div>

来源


7
投票

只需写下代码

filter: brightness(0) invert(1);

3
投票

您可以覆盖模态弹出窗口中的默认 x 按钮的简单方法

  button.close {
        background: #d73e4d;
        background: rgba(215, 62, 77, 0.75);
        border: 0 none !important;
        color: #fff7cc;
        display: inline-block;
        float: right;
        font-size: 34px;
        height: 40px;
        line-height: 1;
        margin: 0px 1px;
        opacity: 1;
        text-align: center;
        text-shadow: none;
        -webkit-transition: background 0.2s ease-in-out;
        transition: background 0.2s ease-in-out;
        vertical-align: top;
        width: 46px;
    }

enter image description here


1
投票

对于 Bootstrap 5,您需要添加 btn-close-white 类

© www.soinside.com 2019 - 2024. All rights reserved.