有人知道如何删除 Opera 按钮上的虚线轮廓吗？
问问题
6474 次
12 回答
5
文章介绍不要失去焦点
对于许多网页设计师来说，可访问性让人联想到带有屏幕阅读器的盲人用户的图像，以及使这些特定受众可以访问网站的困难。当然，可访问性涵盖了超出屏幕阅读器用户极端示例的广泛情况。虽然让一个复杂的网站易于访问确实是一个令人生畏的前景，但也有许多小事只需要一点明智的规划，很容易测试（无需购买昂贵的辅助技术)，并且可以对某些用户组产生影响。
在这篇简短的文章中，我们将重点关注键盘可访问性以及不小心使用 CSS 可能会使您的网站完全无法使用。
以及大纲管理一文给出的测试清单。
2011-02-08 更新
我可以确认目前不可能。它有一个开放的错误。
于 2011-02-07T05:23:09.247 回答
5
我已经做了。
给你：http: //jsbin.com/oniva4。[在 Opera 10.5/11 上测试]
秘诀是使用outline-offset:-2px;（有效地覆盖点）和背景颜色作为轮廓。outline-offset从 9.5 版开始支持。
于 2011-02-09T08:52:12.230 回答
3
我这样说有一个明确的附带条件，除非你用其他指示焦点状态的东西替换它，否则你不应该删除轮廓......
如果对元素应用变换，它会破坏歌剧中的轮廓；它甚至不需要做可见的变换，仅仅应用属性就足够了。所以这将完成这项工作：
#myButton:focus
{
-o-transform:rotate(0);
}但我不能保证这不会被视为渲染错误，因此将来可能会发生变化。
于 2011-06-26T10:51:43.193 回答
2
我相信问题出在您指定大纲属性的位置。试试这个：
*:focus, *:active {
outline: none; (or possibly outline: 0)
}
我对此进行了更多研究，它看起来在输入字段和按钮上不起作用，除非您编辑浏览器的配置，例如 Firefox 的 about:config 页面。这似乎是出于可访问性的原因，以便可以使用键盘来填写和发送表单，而无需使用鼠标。
于 2011-02-07T03:42:39.643 回答
2
我在我的文本区域使用了上面的那个技巧并且效果很好！使用 id 为“itens”的文本区域，就可以了！
#itens:focus, #itens:active{
outline: 1px solid white;
outline-offset: -2px;
}
所以，你可以玩这个：
#itens:focus, #itens:active{
outline: 1px solid lime;
outline-offset: -2px;
}
于 2012-11-27T14:04:20.833 回答
1
您是否在寻找：
button{
outline:none;
}
或者如果您的按钮是输入...
input[type=button]{
outline:none;
}
于 2010-08-24T20:57:56.667 回答
1
于 2011-02-07T05:01:59.433 回答
1
除了我上面的提示——根据经验，我发现它并不总是有效，而且无论如何也不总是合适的，因为它可以改变元素的渲染方式，以微妙的方式，有时甚至是令人不快的方式。
因此，如果这不起作用，您可以做的另一件事经常做的是将轮廓颜色指定为“rgba(0,0,0,0)”
于 2011-11-13T19:22:48.457 回答
0
如果您在样式表中附加 css-reset 应该可以解决问题。
于 2010-08-24T21:00:50.723 回答
0
删除锚标记的轮廓
a {outline : none;}
从图像链接中删除轮廓
a img {outline : none;}
从图像链接中删除边框
img {border : 0;}
于 2011-02-15T15:14:27.513 回答
0
这不是一个答案，更多的是对似乎正在发生的事情的解释：
故事
我删除歌剧大纲的原因是添加我自己的大纲。要添加我使用的大纲：
:focus{
outline:1px dotted #999;
outline-offset:-3px;
}
这在所有其他浏览器中都可以正常工作......除了 Opera。相反，Opera 给了你这个奇怪的干涉图案，看起来像一个dotted-dashed轮廓：
现在如果你删除你的轮廓，你仍然有 Opera 提供的标准轮廓，一个很好的简单的 1px 间隔虚线：
因为我无法添加样式到除了 Opera 之外的所有浏览器，我决定先删除 Opera 的大纲，然后再添加自己的大纲。使用brothercake的解决方案，-o-transform:rotate(0);执行此操作，然后应用我自己的大纲：
瞧！
一个解释？
据我所知，Opera 在 CSS 定义的任何轮廓之上添加了自己的辅助轮廓。
这个二级轮廓似乎有一个独立的颜色、宽度、样式和偏移量。
颜色与背景相反，
宽度为1px，
样式为dotted，
偏移量2px小于边框。
抱歉没有样式图片，上传不正常
一件有趣的事是dottedOpera 的样式和outlineCSS 轮廓的 dotted 是不一样的，否则两者都不会有干涉图案：
结论：
正如我上面所说，我正在使用brothercake的解决方案是通过以下方式取消歌剧边界：
-o-transform:rotate(0);
正如他在后来的评论中提到的，这个“修复”确实存在一些问题，因为它是一个渲染错误：
我注意到，当将窗口或选项卡焦点返回到包含按钮的页面时，如果按钮先前具有焦点，Opera 轮廓将重新出现，直到按钮失去焦点或悬停在上方。
于 2012-10-28T01:01:57.500 回答
0
更好的：
outline: solid 0;
适用于所有网络浏览器
于 2013-03-29T08:28:48.403 回答