焦点输入字段上的边框半径

Question

我们如何调整输入场焦点的边界半径.

HTML

<input type="text" class="rest" />

CSS

.rest{border-radius:15px;border:1px solid red;}

Answer 1

删除标准轮廓(不接受border-radius)并使用蓝色框阴影代替:

.rest{
  border-radius: 15px;
  border: 1px solid grey;
  padding-left: 8px;
}

.rest:focus {
  outline: none;
  box-shadow: 0px 0px 2px #0066ff;
}

<input type="text" class="rest" />

codepen演示

Answer 2

使用:focus伪选择器

.rest:focus{
    border-radius:0;
}

演示

Answer 3

您必须禁用元素焦点状态的轮廓：

*:focus { /*OR .rest:focus*/
    outline:none;
}

这是一把小提琴

如果你想要浏览器默认焦点轮廓上的边框半径，你只能在 firefox 上使用-moz-outline-border:5px;，但这只能在 FF 上工作，但是在 WebKit 中实现类似功能的请求被关闭为 WONTFIX，未来的计划是使轮廓遵循边界。