输入控件的outline属性不考虑border-radius

时间:2014-03-10 09:28:11

标签: html css

我有一个带有border-radius的输入字段,当它处于焦点时,会出现轮廓,但它具有矩形属性。我正在使用Chrome。这是一个错误吗?我不想删除轮廓我只是想让它尊重border-radius。

2 个答案:

答案 0 :(得分:2)

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

示例:

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

http://jsfiddle.net/3cggR/

答案 1 :(得分:-2)

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