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;
}
在 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>
只需写下代码
filter: brightness(0) invert(1);
您可以覆盖模态弹出窗口中的默认 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;
}
对于 Bootstrap 5,您需要添加 btn-close-white 类