2

我在输入字段上使用边框半径，当我选择该字段时，它会突出显示边框，就好像没有边框半径一样，即突出显示具有锐边的假想矩形，而不是真正的圆角。关于如何突出显示圆角矩形的任何提示？边界半径运行良好，但焦点不在圆角上。

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

2 回答 2

6

这是因为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 小提琴演示。

于 2013-04-05T21:26:02.577 回答
0 
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);
}

这就像一个魅力。你会得到很好的专注效果

于 2014-03-18T17:28:01.687 回答