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

Answer 2

input[type=text], textarea {
 -webkit-transition: all 0.30s ease-in-out;
 -moz-transition: all 0.30s ease-in-out;
 -ms-transition: all 0.30s ease-in-out;
 -o-transition: all 0.30s ease-in-out;
 outline: none;
 padding: 3px 0px 3px 3px;
 margin: 5px 1px 3px 0px;
 border: 1px solid #DDDDDD;
}

input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

这就像一个魅力。你会在焦点上取得好成绩

CSS突出重点

2 个答案: