偽元素:focus的使用
阿新 • • 發佈：2020-07-14
介紹一篇關於偽元素的使用。:focus偽類選擇器用於獲得焦點的表單元素，焦點即游標，一般情況下只有類表單元素才能獲取。
簡單的類百度的搜尋頁面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>div{ margin: 100px auto; text-align: center; } .sousuo{ /* display: block; */ width: 420px; height: 32px; /* border: 1px solid yellow; */ } .btn{ height: 38px; background-color: skyblue; color: #ffffff; } .sousuo:focus{ outline: none; border: 1px solid red; background-color: skyblue; } .btn:focus{ color: red; } </style> </head> <body> <div> <input type="text" class="sousuo"> <input type="button" value="搜尋" class="btn"> </div> </body> </html>
提示：使用outline來幹掉input的預設邊框。