输入控件的大纲属性不尊重边界半径

Question

我有一个带边框半径的输入字段，当它处于焦点时，轮廓会出现，但它具有矩形属性。我正在使用 Chrome。这是一个错误吗？我不想删除轮廓我只是希望它尊重边界半径。

Answer 1

不，不幸的是，不可能在所有浏览器中保持一个尊重边界半径的轮廓。 相反，使用outline: 0; 删除轮廓并添加自定义边框或框阴影并使用 CSS 聚焦会更容易。

例子：

input[type="text"] {
 outline: none;
}   
input[type="text"]:focus {
 box-shadow: 0 0 3px blue;
}

(http://jsfiddle.net/3cggR/)

Answer 2

input[type=text]:focus{
box-shadow: 0px 0px 2px 1px orange;
outline:none;
}