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 的時候，藍色邊框去掉了

這篇簡短的文章就到這了，下次見

確認過眼神的朋友