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

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

自定义边框被遮盖
我们自定义的边框被浏览器自带的边框给遮盖了!!!没有出现我们想象中的效果!!!
可见浏览器的自带高亮框并不是在
border中设置的那么问题来了!!!我们要怎样去除浏览器的默认样式 来自定义获取焦点时的边框呢??
具体方法如下
首先去除浏览器自带框 这里我们用到了outline 而不是 border
<style>
input {
outline: none;
}
</style>
然后就是用自定义边框啦
input {
border: 1px solid red;
}
最后的结果是这样:

最后结果