在IE中悬停在html按钮上时焦点类型css

Question

在我们跨元素选项卡的页面上，它们会得到关注，并且这些元素会通过某些特定于浏览器的css突出显示。

像聚焦时的按钮一样，显示如下屏幕截图。

  

注意按钮上的白色虚线

我想在按钮为echo hello,,there,,,,I,have,,too,many,,,commas | tr -s , hello,there,I,have,too,many,commas

时显示完全相似的内容

hovered

Answer 1

这是你要找的吗？ http://jsfiddle.net/Screetop/tpx5tyxc/ 如其他人所述，请查看outline属性。框阴影也会模拟按钮周围的边框。

<button>Submit</button>

button {
    display: block;
    background: grey;
    padding: 5px;
    border: none;
    box-shadow: 0 0 0 3px grey;
}
button:hover {
   /*What should go here?*/
    outline: 1px dotted white;
}
button:focus {
    outline: 1px dotted white;
}

Answer 2

有CSS outline属性，但它不会在元素内部呈现。如果我们使用简单的border作为虚线，我们需要在点和可见边界之间获得一些间距。也许使用box-shadow？试试这个：

button{
    width:140px;
    height:36px;
    color:#FFF;
    background-color:#555;
    border:1px dotted #555;
    border-radius:2px;
    box-shadow: 0 0 0 4px #555;
}
button:hover{
    border-color:#FFF;
}