单击其中一个按钮并返回主页面后,单击的按钮以方形蓝色边框为边界.如何删除此边框,以便在单击它后圆圈按钮周围没有方形边框？
button {
width: 100px;
height: 100px;
background: #3F6;
border-color: #000;
border-radius: 4em;
}
button:hover {
background: #F00;
}<a href="#" target="_blank"><button>Test</button></a>
<a href="#" target="_blank"><button>Test</button></a>
<a href="#" target="_blank"><button>Test</button></a>
<a href="#" target="_blank"><button>Test</button></a>tin*_*han 13
你可以简单地在你的CSS中添加outline-style:none焦点,如下所示:
button:focus { outline-style: none; }
这是一个例子.
要应用于这些对象的样式是:
outline: 0;
或者,如果要从ALL中删除,可以执行以下操作:
<style>
:focus {outline:none;}
::-moz-focus-inner {border:0;}
</style>
例如 :
<style>
input {
outline: 0;
}
button {
outline: 0;
}
</style>
对于IE9支持,您应该包含以下元标记.
<meta http-equiv="X-UA-Compatible" content="IE=9" />
*注意:如果将样式应用于基础对象,则无需将其应用于操作; 所以应用它使用button,意味着你不必把它应用到button:focus,button:active等等.
a:focus {
outline: 0;
}
/* added for Firefox compatability */
button::-moz-focus-inner, a::-moz-focus-inner { border:0; }
button
{
width:100px;
height:100px;
background:#3F6;
outline: 0;
border-color:#000;
-webkit-border-radius: 4em;
-moz-border-radius: 4em;
border-radius: 4em;
}
button:hover
{
background:#F00;
}<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>Title</title>
</head>
<body>
<a href="#" target="_blank"><button>Test</button></a>
<a href="#" target="_blank"><button>Test</button></a>
<a href="#" target="_blank"><button>Test</button></a>
<a href="#" target="_blank"><button>Test</button></a>
</body>
</html>或者,您可以在jsfiddle上查看此示例
移除了左上角/右下角/底部等,并替换为所有4个角的单一样式.还添加了用于跨浏览器支持的兼容行(aka webkit,moz).动作事件会自动继承主类(除非像你看到的那样被覆盖background:#F00;)
此外,请阅读此>> 为什么你不应该删除虚线轮廓,以及如果你真的必须如何
该大纲是出于可访问性原因.
| 归档时间： |
|
| 查看次数： |
10370 次 |
| 最近记录： |