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

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

默认高亮框

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

自定义边框被遮盖

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

具体方法如下

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

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

然后就是用自定义边框啦

input {
border: 1px solid red;
}

最后的结果是这样:


最后结果
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,824评论 1 45
  • CSS参考手册 一、初识CSS3 1.1 CSS是什么 CSS3在CSS2.1的基础上增加了很多强大的新功能。目前...
    没汁帅阅读 3,765评论 1 13
  • 20171119 周日了,今天很累。早上早课,中午还跑了一个校区。中午自己到了校区,去全时买了一份快餐,就这样在手...
    梦家小妖阅读 192评论 0 0
  • 中午吃饭的时候 老狮说:如果我们遇到6个劫匪,你一定要跑。 我说:不怕,你练过拳,左一个右一个就把他们打趴下了。 ...
    sugar爷阅读 192评论 3 0
  • :班主任:“闭上眼带你去个地方[em]e328527[/em]” 我:“操场么[em]e328522[/em]” ...
    MItoi听语阅读 138评论 0 1