搜索提示框(Search suggestion box)是一個非常常用的小工具,它可以提高用戶的搜索效率和搜索體驗。使用CSS也可以很容易地實現搜索提示框。下面是一個簡單的CSS搜索提示框樣例。
/* 設置搜索框樣式 */ .search-box { position: relative; margin: 0 auto; width: 300px; } /* 設置輸入框樣式 */ .search-box input[type="text"] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; outline: none; } /* 設置提示框樣式 */ .search-box .suggestion-box { display: none; position: absolute; top: 100%; left: 0; z-index: 999; margin-top: 2px; width: 100%; border: 1px solid #ccc; border-radius: 4px; background-color: #fff; } /* 顯示提示框 */ .search-box input[type="text"]:focus + .suggestion-box { display: block; } /* 設置提示框中的提示項樣式 */ .search-box .suggestion-box div { padding: 6px 12px; cursor: pointer; } /* 設置提示項高亮 */ .search-box .suggestion-box div:hover { background-color: #f2f2f2; }
可以看到,實現基本的搜索提示框只需要簡單的HTML和CSS就可以搞定,不需要任何JavaScript代碼。這一簡單的CSS搜索提示框樣例只是一個示范,當然還有很多其他的樣式可以嘗試,包括不同的動畫過渡效果,或者更具有個性化的定制等等,讀者可以根據自己的需求實現更加完美的效果。