CSS 更改引导模式窗口中关闭按钮的颜色
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/26917759/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change color of close button in bootstrap modal window
提问by Emmanuel P.
I'm using modal window with boostrap. I've already changed the background and font color, but I did not succed changing the upper right close button to white.
我正在使用带有 boostrap 的模态窗口。我已经更改了背景和字体颜色,但是我没有成功将右上角的关闭按钮更改为白色。
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true" class="modal_button">×</span><span class="sr-only">Close</span></button>
Here's my css attribute
这是我的 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;
}
I would like to turn the X button in white
我想把 X 按钮变成白色
回答by Steve Sanders
Bootstrap is setting the color like this:
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;
}
So you can override it with this:
所以你可以用这个覆盖它:
.close {
color: #fff;
opacity: 1;
}
回答by Asif Raza
Simple way you can override the defual x button in modal popup
您可以在模态弹出窗口中覆盖默认 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;
}