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

bakd9h0s 于 2023-05-02 发布在其他

关注(0)|答案(5)|浏览(83)

我用的是带 Bootstrap 的模式窗口。我已经改变了背景和字体颜色，但我没有成功改变右上角关闭按钮为白色。

<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

来源：https://stackoverflow.com/questions/26917759/change-color-of-close-button-in-bootstrap-modal-window

5条答案

按热度按时间

mlnl4t2r1#

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

赞(0）回复(0）举报 2023-05-02

4uqofj5v2#

在bootstrap 5中，它们有一个类，允许您将关闭按钮的颜色更改为白色。
<button type="button" class="btn-close btn-close-white" aria-label="Close"></button>

赞(0）回复(0）举报 2023-05-02

d6kp6zgx3#

把代码写下来

filter: brightness(0) invert(1);

赞(0）回复(0）举报 2023-05-02

wxclj1h54#

简单的方法，你可以覆盖defual 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;
    }