動態搜索欄是現代網站設計中常見的元素,通過它可以快速地搜索到所需的內容。在實現這一功能的過程中,CSS也扮演了重要的角色。
/*下面介紹一些實現動態搜索欄的CSS代碼*/
/*設置搜索框樣式*/
input[type="text"] {
border: 1px solid #ccc;
padding: 10px;
width: 200px;
}
/*設置搜索按鈕樣式*/
input[type="submit"] {
background: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
/*設置搜索框外層容器樣式*/
.search-container {
position: relative;
}
/*設置搜索下拉列表樣式*/
.dropdown-list {
position: absolute;
top: 100%;
left: 0;
z-index: 999;
width: 100%;
background: #f1f1f1;
border: 1px solid #ccc;
max-height: 200px;
overflow-y: scroll;
}
/*設置下拉列表項樣式*/
.dropdown-item {
padding: 10px;
cursor: pointer;
}
/*設置選中項樣式*/
.dropdown-item.active {
background-color: #007bff;
color: #fff;
}
這段代碼實現了搜索框的樣式、搜索按鈕的樣式、搜索框外層容器的樣式以及下拉列表的樣式。其中,搜索框和搜索按鈕是基本樣式,下拉列表具有定位、最大高度、滾動以及選擇項顏色變化等特性。
在實際的動態搜索欄應用中,還需要使用JavaScript來實現搜索功能和下拉列表展示隱藏等交互行為。這里僅呈現CSS部分的代碼,供參考。