搜索文本框是網站中非常常見的一種功能，它可以幫助用戶快速找到他們需要的信息。在前端開發中，我們需要利用CSS來美化搜索文本框，使其看起來更加好看且易于使用。

/* 這是基本的搜索文本框樣式 */
input[type="text"]{
width: 250px;
height: 30px;
border: none;
padding: 10px;
border-radius: 20px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
outline: none;
}
/* 鼠標懸浮時的效果 */
input[type="text"]:hover{
border-color: #ccc;
}
/* 獲取焦點時的效果 */
input[type="text"]:focus{
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
/* 搜索按鈕樣式 */
input[type="submit"]{
width: 70px;
height: 30px;
background-color: #369;
color: #fff;
border: none;
border-radius: 20px;
margin-left: -5px;
}
/* 鼠標懸浮時的效果 */
input[type="submit"]:hover{
background-color: #236;
}

通過以上代碼，我們可以看到搜索文本框和搜索按鈕的基本樣式，并通過:hover和:focus偽類設置了一些效果。此外，我們還可以根據具體需求，添加一些其他的樣式屬性，比如字體顏色、文字對齊等等，來實現更為豐富的搜索框樣式。