如何设置<input />边框

Question

我不知道如何调用这种功能，但我的问题是，有没有办法设置以下效果的颜色：

仅使用border并不成功。

Answer 1

使用the outline property：

input:focus { outline: 2px orange solid }

outline适用于所有现代浏览器except for IE < 8。

:focus伪类适用于除IE以外的所有现代浏览器 - 您必须使用JavaScript解决方法，如图所示here。

但是，您完全因为outline没有radius属性而无法复制所需的效果（这在关注某个字段时似乎是Chrome的默认行为？）也许@Sarfraz的建议是一个合适的解决方法。

Answer 2

您可以使用此css：

input:focus,textarea:focus,select:focus{
    border:1px solid #fafafa;
    -webkit-box-shadow:0 0 6px #007eff;
    -moz-box-shadow:0 0 5px #007eff;
    box-shadow:0 0 5px #007eff;
}

Check out the demo

当然，您可以根据需要更改颜色。