input元素去除获取焦点时的边框

input输入框在获取焦点时，浏览器会给他一个 默认的高亮边框
像这样：

默认高亮框

于是在我想给输入框自定义获取焦点时的border时 他出现了这样的状况

自定义边框被遮盖
我们自定义的边框被浏览器自带的边框给遮盖了！！！没有出现我们想象中的效果！！！
可见浏览器的自带高亮框并不是在 border中设置的
那么问题来了！！！我们要怎样去除浏览器的默认样式 来自定义获取焦点时的边框呢？？

具体方法如下

首先去除浏览器自带框 这里我们用到了outline 而不是 border

<style>
input {
outline: none;
}
</style>

然后就是用自定义边框啦

input {
border: 1px solid red;
}

最后的结果是这样：

最后结果