色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css搜索提示框

錢文豪1年前6瀏覽0評論

搜索提示框(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搜索提示框樣例只是一個示范,當然還有很多其他的樣式可以嘗試,包括不同的動畫過渡效果,或者更具有個性化的定制等等,讀者可以根據自己的需求實現更加完美的效果。