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 に答える