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

我试图删除按下时出现的提交按钮周围的小蓝色边框。我试图用border: none;修复它，但那并没有解决它。目前我的代码看起来是这样的：在<form>中删除蓝色边框提交按钮

<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上和谷歌Chrome运行42.0.2311.90

UPDATE

.btn:focus { 
     outline: none; 
}

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

来源

2015-04-22 Aruloci

的jsfiddle代码对我来说看起来很好。没有蓝色边框。 – Cherry

你使用了哪个浏览器？ – Aruloci

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

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

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

里面添加head标签上面的样式。默认情况下，引导程序的轮廓颜色为聚焦按钮蓝色。您可以使用上面提到的类“btn”删除/更新它。

UPDATE

由于@MatthewRapati提示：本大纲让我们的人都知道，按钮具有焦点，并且不应该被删除。这是一个无障碍的关注。最好是再整，如果默认是不希望

来源

2015-04-22 18:47:38 Fahad

这个大纲让人们知道该按钮有焦点，**不应该被删除。这是一个可访问性问题。如果不需要默认值，最好重新设置它。 –

是的，同意@MatthewRapati但问题是关于删除它：P – Fahad

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

从按钮

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

删除大纲还可以从所有的按键使用

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

默认按钮重点对铬1px的蓝色轮廓去除轮廓。还有更多的项目具有轮廓，你可以使用禁用所有的人：

*{ 
    outline:0px; 
}

来源

2015-04-22 18:47:33

请不要这样做。 –

为什么我不应该这样建议？ – Aruloci

@Aruloci任何人使用键盘浏览您的网站将不知道哪些元素有重点。他们不知道他们在哪里。 –

取出从按钮上点击 “纲要”（A：焦点）

.btn:focus { 
    outline: none; 
}

来源

2015-04-22 18:48:15 chrisbedoya

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

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

来源

2015-04-22 18:51:13 Shelly

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

回答

相关问题