Question

我正在尝试删除按下时出现的提交按钮周围的小蓝色边框。我尝试用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在localhost和Google Chrome 42.0.2311.90

上运行它

的更新

.btn:focus {
      outline: none;
}

这为我修好了！我不打算通过键盘访问我的网站，所以我不需要蓝色轮廓。这只是为了看起来。

Answer 1

我认为你正在寻找这样的东西：

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

在head标记内添加以上样式。默认情况下，引导程序的轮廓颜色为蓝色，用于聚焦按钮。你可以使用class＆＃34; btn＆＃34;删除/更新它。如上所述。

<强>更新

正如@MatthewRapati所说：这个大纲让人们知道了按钮具有焦点，不应删除。这是一个可访问性关心。如果不需要默认值，最好重新设置它

Answer 2

删除＆＃34;大纲＆＃34;从点击按钮（a：焦点）

.btn:focus {
    outline: none;
}

Answer 3

大纲主要用于辅助功能设置，除非您为焦点/辅助功能提供某种机制或突出显示，否则应保留默认行为。如果您只是在不提供相同内容的情况下删除并且用户使用键盘进行导航，则他将无法知道他当前所处的链接/按钮，并可能破坏您的页面的整体体验。

从按钮

中删除轮廓

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

您还可以使用

从所有按钮中删除轮廓

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

默认按钮焦点在Chrome上的大小为1px蓝色。还有更多具有轮廓的项目，您可以使用以下方法禁用所有项目：

*{
    outline:0px;
}

Answer 4

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

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

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

4 个答案: