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

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

默认高亮框

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

自定义边框被遮盖

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

具体方法如下

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


然后就是用自定义边框啦

input {
border: 1px solid red;
}

最后的结果是这样:


最后结果

你可能感兴趣的:(input元素去除获取焦点时的边框)