从Chrome中的css自定义样式按钮中删除蓝色边框-Java 学习之路

566

我正在开发一个网页，我想要自定义样式的 <button> 标签 . 所以用CSS，我说： border: none . 现在它在safari中完美运行，但在chrome中，当我点击其中一个按钮时，它会在它周围放置一个恼人的蓝色边框 . 我认为 button:active { outline: none } 或 button:focus { outline:none } 会起作用，但两者都没有 . 有任何想法吗？

这是它在点击之前的样子（以及我希望它在点击后仍然看起来如何）：

这就是我所说的边界：

enter image description here

这是我的CSS：

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

16 回答

9
不要忘记 !important 声明，以获得更好的结果
```
button:focus {outline:0 !important;}
```
无论CSS规则中出现哪个规则，都将始终应用具有！important属性的规则 .
回复于 2024-05-11T04:24:37+08:00
2
这对我有用：
```
button:focus {
    box-shadow:none;
}
```
回复于 2024-05-11T04:24:37+08:00

在CSS文件中添加它 .

*{
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

回复于 2024-05-11T04:24:37+08:00

1
删除 outline 对于可访问性来说非常糟糕！理想情况下，焦点环仅在用户 intends to use the keyboard 时显示 .

使用:focus-visible . 它目前是一个W3C提议，用于使用CSS设置仅键盘焦点的样式 . 在主流浏览器支持之前，您可以使用这个强大的polyfill .
```
/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
  outline: none;
}

/* Optional: Customize .focus-visible */
.focus-visible {
  outline-color: lightgreen;
}
```
我还写了一个更详细的post，以防您需要更多信息 .
回复于 2024-05-11T04:24:37+08:00
2

只需写 outline:none; 即可 . 无需使用伪元素 focus

回复于 2024-05-11T04:24:37+08:00
8
对于任何使用Bootstrap并遇到此问题的人，他们使用：active：focus以及just：active和：focus所以你需要：
```
element:active:focus {
    outline: 0;
}
```
希望能有时间把某人弄出来，把我的脑袋弄得一团糟，想知道为什么这么简单的东西不起作用 .
回复于 2024-05-11T04:24:37+08:00
232
这是Chrome系列中的一个问题，并且一直存在 .

一个bug已被提出https://bugs.chromium.org/p/chromium/issues/detail?id=904208

它可以在这里显示：https://codepen.io/anon/pen/Jedvwj只要你向任何类似按钮添加边框（例如，将role = "button"添加到标签中），当你用鼠标点击时，Chrome就会混乱并设置焦点状态 .

我强烈建议使用此修复程序：https://github.com/wicg/focus-visible .

请执行以下操作
```
npm install --save focus-visible
```
将脚本添加到您的html：
```
<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>
```
或者，如果使用webpack或类似内容，请导入主条目文件：
```
import 'focus-visible/dist/focus-visible.min';
```
然后把它放在你的css文件中：
```
// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
  outline: magenta auto 5px;
}
```
你 can 刚刚设置：
```
button:focus {outline:0;}
```
但是如果你拥有大量用户，那么你就会对那些不能使用鼠标的人或那些只想使用键盘提高速度的人产生不利影响 .
回复于 2024-05-11T04:24:37+08:00

对于这个问题：

enter image description here

用这个：

*{
         -webkit-tap-highlight-color: rgba(0,0,0,0);
         -webkit-tap-highlight-color: transparent; /* For some Androids */
    }

结果：

enter image description here

回复于 2024-05-11T04:24:37+08:00

7
在我的这个问题的例子中，我必须指定 box-shadow: none
```
button:focus {
  text-decoration: none;
  outline:none;
  border: none;
  box-shadow: none;
}
```
回复于 2024-05-11T04:24:37+08:00
3

Wait! There's a reason for that ugly outline!

在删除那个丑陋的蓝色轮廓之前，您可能需要考虑 accessibility . 默认情况下，蓝色轮廓放在可聚焦元素上 . 这样，具有辅助功能问题的用户可以通过Tab键来关注该按钮 . 一些用户没有使用鼠标的运动技能，并且必须仅使用键盘（或一些其他输入设备）进行计算机交互 . 当您移除蓝色轮廓时，不再有关于哪个元素聚焦的可视指示符 . 如果要删除蓝色轮廓，则应将其替换为按钮聚焦的其他类型的可视指示 .

Possible Solution: Darken Buttons when focused

对于下面的示例，Chrome的蓝色轮廓首先使用 button:focus { outline:0 !important; } 删除

以下是正常显示的基本Bootstrap按钮：

以下是获得焦点时的按钮：

按下它们时的按钮：

如您所见，按钮在获得焦点时会稍暗一些 . 就个人而言，我建议使聚焦按钮更暗，以便聚焦状态和按钮的正常状态之间存在非常显着的差异 .

It's not just for disabled users

让您的网站更易于访问是经常被忽视的内容，但可以帮助您在网站中创建更高效的体验 . 有许多普通用户使用键盘命令在网站中导航以便将手放在键盘上 .

回复于 2024-05-11T04:24:37+08:00
49
直到所有现代浏览器都会启动支持css-selector :focus-visible ，
save accessibility 最简单也可能是最好的方法是删除这个棘手的焦点 only for mouse users 并保存它 for keyboard users ：

1.使用这种微小的polyfill（约10kb）：https://github.com/WICG/focus-visible
2.在你的css中的某处添加下一个代码：
```
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}
```
css4-selector的浏览器支持：焦点可见现在非常弱：
https://caniuse.com/#search=focus-visible
回复于 2024-05-11T04:24:37+08:00
1147
如果要在输入中删除相同的效果，可以添加以下代码和按钮 .
```
input:focus {outline:0;}
```
回复于 2024-05-11T04:24:37+08:00
1
我只是通过选择all并将outline：none应用于所有内容，从页面中的所有标签中删除轮廓:)
```
*:focus {outline:none}
```
正如bagofcole所提到的，您可能还需要添加！important，因此样式将如下所示：
```
*:focus {outline:none !important}
```
回复于 2024-05-11T04:24:37+08:00
44
为具有蓝色边框问题的所有元素尝试此代码
```
*{
outline: none;
}
```
要么
```
*{
outline-style: none;
}
```
回复于 2024-05-11T04:24:37+08:00

只需将此添加到您的CSS：

button:focus {outline:0;}

看看它或JSFiddle：http://jsfiddle.net/u4pXu/

或者在这个片段中：

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}

<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>

回复于 2024-05-11T04:24:37+08:00

2
使用这个：
```
:active {
    outline:none;
}
```
或这个如果那不起作用：
```
:active {
   outline:none !important;
}
```
这对我有用（至少FF和Chrome） . 只需定位 :focus 状态，而不是定位 :focus 状态，当用户点击链接时，这将删除浏览器中美学上突兀的突出显示 . 但是当有残障的用户选项卡或通过页面切换标签时，它仍将保留焦点状态 . 双方都很开心 . :)
回复于 2024-05-11T04:24:37+08:00

从Chrome中的css自定义样式按钮中删除蓝色边框

16 回答

相关问题