在<form>提交按钮中去除蓝色边框

Question

在<form>提交按钮中去除蓝色边框

8

我正在尝试去除提交按钮周围的小蓝色边框，该边框出现在按下按钮时。我尝试使用 border: none; 来解决，但这并没有解决问题。目前我的代码如下：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="theme.css" />
        <link rel="stylesheet" type="text/css" href="hover.css" />
    </head>
    <body>
        <form id="button1" action="#" method="post">
            <input type="submit" value="ORANGE" 
                class="btn btn-warning"/>
        </form>
    </body>
</html>

Jsfiddle

我在本地使用XAMPP并使用Google Chrome 42.0.2311.90运行它。

更新

.btn:focus {
      outline: none;
}

这对我很有帮助！我不打算通过键盘访问我的网站，所以我不需要蓝色的轮廓线。这只是为了美观。

- Aruloci

Jsfiddle的代码看起来很好。没有蓝色边框。 - Cherry

2

你用的是哪个浏览器？ - Aruloci

你是在说点击按钮时出现的轮廓吗？这是你的按钮在Chrome上的样子 https://www.evernote.com/shard/s136/sh/b17e198f-8c77-4306-9a81-c2a902b139ca/20a74b16b9bc85451e507e459ad95041 - jerrylow

2

是的，当按钮被按下时出现的边框。您知道如何在 Chrome 中去掉它吗？ - Aruloci

使用其他人在答案中描述的 outline: none; 方法。 - Manly

4个回答

2

点击按钮时去除按钮的“outline”效果（a:focus）

.btn:focus {
    outline: none;
}

- chrisbedoya

1

轮廓主要用于辅助功能设置，并且应保留默认行为，除非您提供了某种机制或重点以用于关注 / 辅助性。如果您只是删除而不提供相同的内容，并且用户使用键盘进行导航，则他将无法知道当前链接 / 按钮，并可能破坏页面的整体体验。

从按钮中删除轮廓

.btn-warning:focus{
    outline:0px;
}

您可以使用以下代码从所有按钮中删除轮廓线：

input[type=button]:focus,input[type=submit]:focus{
    outline:0px;
}

在Chrome浏览器中，默认按钮会有一个1像素蓝色的轮廓线。还有许多其他项目也会有轮廓线，您可以使用以下方式禁用所有轮廓线：

*{
    outline:0px;
}

- Durgesh Chaudhary

请不要真的这样做。 - Matthew Rapati

1

为什么我不应该像建议的那样做？ - Aruloci

@Aruloci 如果有人使用键盘浏览您的网站，他们将不知道哪个元素具有焦点。他们将不知道自己在哪里。 - Matthew Rapati

@MatthewRapati，但是OP想知道如何删除这个边框是什么。可访问性设置是各个网站的偏好设置。他可能喜欢在焦点上以不同的方式突出显示，轮廓线不是唯一的选择。 - Durgesh Chaudhary

@DurgeshChaudhary 当然可以，但我想提问者或任何阅读此问题以获取答案的人可能不知道为什么要使用这些轮廓线，只是为了美观而将其删除。 - Matthew Rapati

1

@MatthewRapati 在回答中添加了一种信息，以便任何阅读它们的人也知道其用途和后果。 :) - Durgesh Chaudhary

1

演示：http://jsfiddle.net/baqunkn1/

.btn-warning {
  color: #ffffff;
  background-color: #ff851b;
  border-color: #ff7701;
  border: none;
  outline:none;
}

- Shelly

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fahad Khan · Accepted Answer

我想你正在寻找这样的内容：

我认为你正在寻找类似于这样的内容：

<style>   
 .btn:focus {
      outline: none;
    }
</style>

在head标签中添加上述样式。默认情况下，Bootstrap的聚焦按钮轮廓颜色为蓝色。您可以使用上面提到的"class"btn"来删除/更新它。

更新

正如@MatthewRapati所建议的那样：这个轮廓让人们知道按钮有焦点，不应该被移除。这是一个可访问性问题。如果不想要默认值，最好重新设置样式。