我无法更改引导按钮的颜色以关闭模式答案

【问题标题】：I am unable to change the color of a bootstrap button to close a modal我无法更改引导按钮的颜色以关闭模式
【发布时间】：2023-02-25 05:45:32
【问题描述】：

我正在尝试更改引导程序关闭按钮的颜色，但似乎无法更改“x”的颜色

最初我以为m-close类没有应用CSS，但是在将它从color更改为background-color后，按钮的背景变成了白色，而“x”仍然是黑色。

<div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="modalContact" aria-hidden="true">
 <div class="modal-dialog">
   <div class="modal-content">
     <div class="row d-flex justify-content-center align-items-center">
       <div class="card bg-dark text-white" style="border-radius: 1.3rem;">
         <div class="modal-header">
           <button type="button" class="btn-close m-close" data-bs-dismiss="modal" aria-label="Close">

           </button>
         </div>...

.m-close {
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
}

jsfiddle：https://jsfiddle.net/rb2gk3u9/1/

【问题讨论】：

在你的 css 之后添加 !important。这使得它比普通的引导程序元素具有更高的优先级
我试过!important 但按钮颜色仍然是黑色

标签： html css twitter-bootstrap

【解决方案1】：

Bootstrap .btn-close 中的图标 X 是一个使用 SVG 数据 URI 的 background-image，因此您可以使用 CSS 中的 color 更改它。

如果您想将 X 图标更改为白色，可以使用 Bootstrap 类名称。只需将类 btn-close-white 添加到关闭按钮，就像这样

<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close">
</button>

希望这有帮助。

【讨论】：

【解决方案2】：

@Ashar 给出的答案是正确的，你无法更改它，因为它里面的图标不是物理元素，而是 svg 背景图像，所以没有办法（至少我知道）“直接影响”css 中的背景图像，除了一个属性，它是过滤器。

.btn-close-white 应用了一个“反相”过滤器，这将起到作用，但不会是纯亮的白色。

更好的办法是在按钮内放置一个真正的图标并隐藏背景图像。

【讨论】：