如何从输入按钮中删除轮廓边框

Posted 2023-02-22

【中文标题】如何从输入按钮中删除轮廓边框

【英文标题】：How to remove outline border from input button

【发布时间】：2013-11-22 02:28:27

【问题描述】：

当我点击其他地方时，边框消失了，我尝试使用onfocus: none，但这没有帮助。如何让这个丑陋的按钮边框在点击时消失？

input[type=button] 
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;

<input type="button" value="Example Button">

【问题讨论】：

在我的 mozilla 浏览器上看起来不错

焦点矩形旨在帮助用户观察点击是有效的，从而防止他意外点击两次。那么你确定你是在解决问题而不是在创造问题吗？

一本好书a11yproject.com/posts/never-remove-css-outlines

【参考方案1】：

Chrome 和 FF 中的焦点轮廓：

移除了按钮焦点轮廓：

input[type=button] 
  outline:none;

input[type=button]::-moz-focus-inner 
  border: 0;


/*
  Accessibility (A11Y)
  Don't forget! User accessibility is important
*/
input[type=button]:focus 
  /* your custom focused styles here */
 

【参考方案2】：

为了避免当你改变焦点上的outline属性时引起的问题，是当用户在输入按钮上Tab或点击它时给予视觉效果。

在这种情况下是提交类型，但您也可以应用到 type="button"。

input[type=submit]:focus 
    outline: none !important;
    background-color: rgb(208, 192, 74);

【参考方案3】：

将按钮的outline 和box-shadow 属性设置为none 并使它们重要。

input[type=button] 
    outline: none !important;
    box-shadow: none !important;
 

将值设置为 **important** 的原因是，如果您使用其他 CSS 库或 Bootstrap 等框架，它可能会被覆盖。

【讨论】：

box-shadow 在 Edge 上为我工作，很好 :)

【参考方案4】：

使用 outline: none; 您可以在 chrome 中删除该边框。

<style>
input[type=button] 
    width: 120px;
    height: 60px;
    margin-left: 35px;
    display: block;
    background-color: gray;
    color: white;
    border: none;
    outline: none;

</style>

【讨论】：

在 Chrome 上，我必须将 outline: none; 规则添加到 input[type="button"]:focus 而不是 input[type="button"]。

@SungCho：谢谢。你的方法帮助了我。

在 Microsoft Edge 中也可以使用

【参考方案5】：

由于 Chrome 和 Mozilla 不仅在按钮周围而且在链接文本周围添加了这一行，所以我在我的网站上使用：

a:focus outline: none;

适用于浏览器、链接和按钮。

顺便说一句，这没有（27.4.2021）：

input[type=button]
   outline:none;

input[type=button]::-moz-focus-inner 
   border: 0;

【参考方案6】：

注意outline: none 可以同时应用于<button> 标签和input[type=button] 以删除浏览器应用的点击边框。

【参考方案7】：

使用键盘恢复轮廓的另一种方法是使用:focus-visible。但是，这在 IE 上不起作用：https://caniuse.com/?search=focus-visible。

【参考方案8】：

在标准的 Web 开发中删除 nessorry 可访问事件不是一个好主意。 无论哪种方式，如果您正在寻找仅删除轮廓的解决方案并不能解决问题。您还必须删除蓝色阴影。对于特定场景，请使用单独的类名将这种特殊样式隔离到您的按钮。

.btn.focus, .btn:focus 
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);

最好这样做

.remove-border.focus, .remove-border:focus 
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
 

【参考方案9】：

button:focusoutline:none !important;

如果在Bootstrap中使用，则添加!important

【讨论】：

我想提问者已经尝试过了，毕竟问题是tried onfocus none, but didn't help。

【参考方案10】：

这比你想象的要简单得多。当按钮获得焦点时，应用outline 属性，如下所示：

button:focus 
    outline: 0 !important;

但是当我使用none 值时，它对我不起作用。

【参考方案11】：

正如许多其他人所提到的，selector:focus outline: none; 将删除该边框但该边框是一个关键的辅助功能，允许键盘用户找到按钮，不应该 被删除。

由于您的关注点似乎是审美问题，您应该知道您可以更改轮廓的颜色、样式和宽度，使其更适合您的网站样式。

selector:focus 
  outline-width: 1px;
  outline-style: dashed;
  outline-color: red;

速记：

selector:focus 
  outline: 1px dashed red;

【参考方案12】：

给定下面的html：

<button class="btn-without-border"> Submit </button>

在 css 样式中执行以下操作：

.btn-without-border:focus 
    border: none;
    outline: none;

此代码将删除按钮边框并在单击按钮时禁用按钮边框焦点。

【参考方案13】：

这个对我有用

button:focus 
    border: none;
    outline: none;

【参考方案14】：

删除轮廓是可访问性的噩梦。使用键盘切换的人永远不会知道他们在哪个项目上。

最好留下它，因为大多数点击的按钮无论如何都会带你到某个地方，或者如果你必须删除大纲，然后将它隔离为一个特定的类名。

.no-outline 
  outline: none;

然后，您可以在需要时应用该类。

【参考方案15】：

outline 属性是您所需要的。它是在单个声明中设置以下每个属性的简写：

outline-style outline-width outline-color

您可以使用outline: none;，这是在接受的答案中建议的。如果你愿意，你也可以更具体：

button 
    outline-style: none;

【参考方案16】：

它对我来说很简单:)

*:focus 
    outline: 0 !important;

【讨论】：

这是唯一对我有用的答案，但是如果没有 !important 你会怎么做呢？我从很多消息来源获悉，只有在绝对必要时才应使用它。

我在外部 css 中为整个应用程序做了这个按钮样式。如果你想忽略它，你可以在css中使用#id在每个按钮中使用它：#button-tyleoutline：0;或者对每个按钮中没有#id的所有按钮使用相同的样式，这是一个演示link: input[type="button"] width:70px;高度：30px；左边距：72px；边距顶部：15px；显示：块；背景颜色：灰色；白颜色;边框：无；大纲：0；

删除蓝色背景颜色 onclick 我添加了 -> * -webkit-tap-highlight-color: transparent !important;

第一次完美运行 - 谢谢！