CSS已經成為了網頁設計中不可或缺的一環，例如在搜索欄的設計中，CSS可以發揮重要的作用。以下是一些CSS技巧，可以幫助您輕松地制作出漂亮且實用的搜索欄。

/*搜索欄的CSS代碼*/
.search {
display:inline-block;
position:relative;
height:36px;
}
/*搜索框輸入*/
.search input[type="text"] {
height:36px;
padding:0 10px;
border:0 none;
width:200px;
background-color:#f2f2f2;
}
/*搜索框按鈕*/
.search button {
height:36px;
padding:0 20px;
font-weight:bold;
border:0 none;
background-color:#ff9900;
color:#fff;
position:absolute;
top:0;
right:0;
}

上述代碼中，“.search”定義了一個搜索欄的容器，內部包含一個輸入框和一個按鈕。其中，“input[type='text']”定義了輸入框的樣式，包括高度、邊框、背景顏色等；“button”定義了按鈕的樣式，包括高度、邊框、背景顏色、位置等。

此外，CSS還可以使用偽元素“::placeholder”設置輸入框的默認文本提示，例如：

/*輸入框默認提示*/
.search input[type="text"]::placeholder {
color:#ccc;
}

使用上述CSS技巧制作出來的搜索欄，不僅實用，而且具有美觀的外觀，可以提升用戶體驗。