focus - CSS焦点突出

Question

我在输入字段上使用边框半径，当我选择该字段时，它会得到边框高光，就好像没有边框半径一样，即具有尖锐边缘的虚构矩形会被高亮显示，而不是真正的圆角。关于如何使圆角矩形突出显示的任何提示？边界半径功能正常，但聚焦时高光不在圆角上。

<input class="filter" type="text" name = "Test1" value="Test1"> <!--HTML-->
.filter{border-radius:9px;} /*CSS*/

Answer 1

这是因为outline不尊重(无论出于何种原因)border-radius，要模拟这一点，最容易使用box-shadow:

.filter {
    padding: 0.4em;
    outline: none;
    border-radius: 9px;
}
.filter:focus {
    box-shadow: 0 0 0 2px #f90; /* or whatever colour you'd prefer */
}

JS Fiddle demo。