input 获取焦点 蓝色边框 去掉 outline

这是一个系列，记录我前端开发常用的代码，小常识，有些是参考网上代码，(讲的可能有点烂，求不要打脸，嘤嘤嘤~~)送给那些需要的人。可以相互交流，喜欢的加我吧。
Wx: Lxp911221

最近发生了一些前端小问题，会在博客一一记下来

第一篇是 outline 属性的使用

去除input的边框

开始有以下方案

 input{text-indent: 1em;}
 #search1{ }
 #search2{ border-width: 0; }
 #search3{ border:1px solid red; }
 #search4{ outline:medium;}
 /*获取焦点时 外边框显示红色*/
 #search4:focus{ border:1px solid red; }
 #search5:focus{ border:1px solid red; }
 #search5{ appearance: none; }

html代码引用

  <input type="text" id="search1" name="search" 
          placeholder="请输入搜索内容1" />  

 <input type="text" id="search2" name="search" 
      placeholder="请输入搜索内容2" /> <br/><br/>

  <input type="text" id="search3" name="search" 
      placeholder="请输入搜索内容3" />  

  <input type="text" id="search4" name="search" 
      placeholder="请输入搜索内容4" /> <br/><br/>

  <input type="text" id="search5" name="search" 
    placeholder="请输入搜索内容5" /> <br/><br/>

---

结果肯定是 outline:medium 或者 outline:none 的时候，蓝色边框去掉了

这篇简短的文章就到这了，下次见

确认过眼神的朋友