CSS搜索條是一個常用的頁面元素,有助于用戶快速找到需要的內(nèi)容。在編寫CSS搜索條時,需要考慮布局、樣式及交互效果。
.search-bar { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; background-color: #fff; border-radius: 25px; box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1); } .search-bar input { width: 80%; height: 100%; padding: 0 20px; border: none; outline: none; font-size: 16px; } .search-bar button { width: 20%; height: 100%; background-color: #F7A200; border: none; outline: none; border-radius: 0 25px 25px 0; color: #fff; font-size: 16px; cursor: pointer; } .search-bar button:hover { background-color: #F49100; }
上面的CSS代碼實現(xiàn)了一個簡單的搜索條,其中包括了如下樣式:
- .search-bar:設(shè)置搜索條的整體樣式,包括寬度、高度、背景色、邊框等屬性;使用flex布局實現(xiàn)居中排列。
- input:設(shè)置搜索輸入框的樣式,包括寬度、高度、內(nèi)邊距、邊框、字體大小等屬性。
- button:設(shè)置搜索按鈕的樣式,包括寬度、高度、背景色、邊框、圓角、字體顏色、光標等屬性;使用:hover偽類實現(xiàn)鼠標懸停時的背景色變化。
通過以上CSS代碼,我們可以創(chuàng)建一個簡單、美觀、實用的搜索條,為用戶提供更好的搜索體驗。