淘寶是一個十分流行的電商平臺,它的搜索框是用戶進行商品搜索的主要入口。下面介紹如何使用CSS美化淘寶搜索框。
/* 設置搜索框的寬度和高度 */ .tb-search-box { width: 300px; height: 40px; } /* 設置搜索框的背景顏色和邊框 */ .tb-search-box input[type="text"] { background-color: #f5f5f5; border: 1px solid #ddd; width: 100%; height: 100%; padding: 0 10px; } /* 設置搜索框提交按鈕的樣式 */ .tb-search-btn { background-color: #ff5400; border: none; color: #fff; cursor: pointer; height: 100%; width: 50px; } /* 鼠標懸浮在搜索框上時的樣式 */ .tb-search-box:hover input[type="text"] { box-shadow: 0 0 5px #bbb; } /* 設置搜索框和提交按鈕在同一行 */ .tb-right { display: inline-block; }
可以根據自己的需求來調整樣式,如修改顏色、字體等,使搜索框更符合自己網站的風格。