时间戳

首页 > 解决方案 > Button点击时不改变界面

css - Button点击时不改变界面

问题描述

免责声明：以前从未使用过 CSS，第一次有与样式相关的前端任务，所以对于任何误解、错误的用词等，我深表歉意。

我有这个打开模态（1）的虚拟按钮：

在此处输入图像描述

所以当我点击它时，会弹出一个模态，按钮变成这样（2）：

在此处输入图像描述

如您所见，该按钮在单击时有一个边框（？），看起来像是单击保持或其他。因此，当模式打开时，如果我单击屏幕上的任意位置，按钮将变为 (3)：

在此处输入图像描述

这张图片中没有像（2）那样的边框。这是一个简单的button组件：

<button className={`btn position-relative  ${className}`} onClick={onClick}>
...
</button>

并且它打开 Modal 的组件具有以下代码：

<Button onClick={() => setModal(true)} className={'btn btn-primary mr-2'}>
  (info icon)
</Button>

您知道单击（1）后如何实现使按钮像（3）中而不像（2）中那样吗？

标签： cssbuttonbootstrap-4

解决方案

Bootstrap（来自它的部分 scss 文件_buttons.scss）默认情况下会在焦点（=单击）时向按钮添加一个框阴影（蓝色）

这是风格

 .btn.focus, .btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
 }

所以你应该做的是在你自己的样式表中删除它（覆盖它）。请记住，您应该使用更具体的选择器。使用只是.btn:focus { } 不会覆盖它。在下面的示例中，我也使用了标签名称button.btn:focus {}

button.btn:focus {
  box-shadow: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn">Button</button>

PS您可以使用每个现代浏览器提供的开发工具“检查”在任何元素上的不同状态（悬停、焦点、活动）上添加的样式

推荐阅读