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小提琴演示.