从css自定义中删除蓝色边框
我在网页上工作，我想要自定义样式的<button>标签。 所以用CSS，我说： border: none 。 现在它在safari中完美运行，但在Chrome中，当我点击其中一个按钮时，它会在周围放置令人讨厌的蓝色边框。 我想button:active { outline: none }或button:focus { outline:none }将工作，但都没有。 有任何想法吗？
这是被点击之前的样子（以及我希望它在被点击后仍然能够看到的样子）：
这就是我正在谈论的边界：
这是我的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;
}
只需将此添加到您的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>等待！ 这个丑陋的轮廓有一个原因！
在删除丑陋的蓝色轮廓之前，您可能需要考虑可访问性 。 默认情况下，该蓝色轮廓放置在可聚焦元素上。 这是为了让具有可访问性问题的用户能够通过制表符来关注该按钮。 一些用户没有运动技能来使用鼠标，只能使用键盘（或其他输入设备）进行计算机交互。 当您移除蓝色轮廓时，不再有可视指示器显示哪个元素被聚焦。 如果要删除蓝色轮廓，则应将其替换为该按钮所关注的另一种类型的视觉指示。
可能的解决方案：聚焦时变暗按钮
对于以下示例，Chrome的蓝色轮廓首先使用button:focus { outline:0 !important; }删除button:focus { outline:0 !important; } button:focus { outline:0 !important; }
以下是您正常显示的基本Bootstrap按钮：
以下是他们获得焦点时的按钮：
这里按下按钮时：
正如你所看到的，当他们获得焦点时，按钮会变得更暗。 就个人而言，我会建议让聚焦按钮更暗，以便聚焦状态和按钮的正常状态之间存在非常明显的差异。
这不仅仅适用于残疾用户
让您的网站更易于访问是经常被忽视的内容，但可以帮助您在网站上创造更高效的体验。 有许多普通用户使用键盘命令浏览网站，以便将手放在键盘上。
不要忘记!important声明，以获得更好的结果
button:focus {outline:0 !important;}
无论规则出现在CSS文档中的哪个位置，都会应用具有！important属性的规则。
链接地址: http://www.djcxy.com/p/41619.html