純 CSS 的搜索框,無需 JavaScript,是建立在 HTML5 的兩大特性:placeholder 和 focus 上的。通過使用 CSS3 的偽類選擇器 :focus 實現在輸入框獲得焦點時,可以直接在樣式表中操作元素,從而實現動畫效果。
/* CSS 代碼段 */ .search-box { position: relative; width: 200px; height: 40px; } .search-box input { width: 100%; height: 100%; border: none; border-radius: 20px; padding: 0 20px; font-size: 16px; outline: none; background-color: transparent; box-sizing: border-box; } .search-box input:focus { border: 2px solid #ff7f50; } .search-box input::placeholder { color: #b7b7b7; } .search-box input:focus::placeholder { color: transparent; } .search-box .search-icon { position: absolute; top: 10px; right: 20px; font-size: 18px; color: #b7b7b7; cursor: pointer; } .search-box input:focus + .search-icon { color: #ff7f50; }
在 HTML 中,我們只需要使用 input 元素占位符屬性 placeholder 來展示搜索框提示,并通過 class 選擇器來設置整個搜索框的樣式。在 CSS 樣式表中,我們設置輸入框 input 是絕對定位,再在 input 容器類 .search-box 中設置邊框、圓角、padding 和背景色。
通過使用預定義偽類選擇器 :focus 來檢測元素是否被選中,從而在用戶輸入時展現不同的樣式和動畫效果。通過設置 input::placeholder 和 input:focus::placeholder 的顏色為透明,我們實現了輸入框獲取焦點時提示文字消失的效果。
最后,在 .search-box 中加入自定義樣式,設置搜索圖標的位置及顏色。
總之,使用純 CSS 實現搜索框是一種創新的方式,使搜索框的樣式有了更多的自定義空間,同時也提高了頁面的效率。