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

【问题标题】：Change color of close button in bootstrap modal window在引导模式窗口中更改关闭按钮的颜色
【发布时间】：2022-02-08 15:56:54
【问题描述】：

我正在使用带有 boostrap 的模态窗口。我已经更改了背景和字体颜色，但我没有成功将右上角的关闭按钮更改为白色。

<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true" class="modal_button">&times;</span><span class="sr-only">Close</span></button>

这是我的 css 属性

.modal-header {
  border-top: 1px solid white;
  border-left: 1px solid white;
  border-right: 1px solid white;
  text-align: left;
  font-size: 23px;
  color: white;
  background-color: #261f31;
  border-bottom: 0px;
}

我想把 X 按钮变成白色

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

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;
}

【讨论】：

也必须覆盖不透明度。 .close { color: #fff; opacity: 1; }
检查问题中的时尚关闭按钮 here，希望对某人有所帮助。
您实际上需要设置跨度的颜色和按钮的不透明度。 .close{opacity: 1} .close span{color: #fff}
对于Bootstrap 5，您需要添加btn-close-white 类。这将设置filter: invert(1) grayscale(100%) brightness(200%)

【解决方案2】：

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

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

【讨论】：

【解决方案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;
    }

【讨论】：

【解决方案4】：

只需写下代码

filter: brightness(0) invert(1);

【讨论】：

【解决方案5】：

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。