去除input默認邊框和選中時的框框


添加兩個樣式:

input {
     border:0 none;
     outline:none;
}

解釋:

去除邊框比較簡單,直接border:0 none;。

去除input選中時的樣式,首先觀察它到底是什么:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>1.0</title>
 6     <style>
 7         * {
 8             margin:0;
 9             padding:0;
10         }
11         input {
12             border:13px solid red;
13         }
14     </style>
15 </head>
16 <body>
17     <input type="text" placeholder="請輸入姓名">
18 </body>
19 </html>
View Code

把邊框放大觀察,發現:當input選中時,出現的框框在border外邊,即設置元素周圍的輪廓outline。

最后,直接outline:none;。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM