CSS可以讓我們的頁面變得更加美觀，優雅。其中CSS樣式設計的一個非常重要的組成部分便是搜索框。一個好看的手機搜索框，配合整個頁面的風格，可以讓整個頁面變得更加協調、美觀。

/*搜索框樣式*/
.search {
position: relative;
margin: 20px auto;
width: 80%;
height: 40px;
}
.search input[type="text"] {
width: 100%;
height: 100%;
font-size: 16px;
border: none;
border-radius: 20px;
padding-left: 30px;
padding-right: 60px;
box-sizing: border-box;
}
.search input[type="submit"] {
position: absolute;
right: 0;
top: 0;
width: 60px;
height: 100%;
background-color: #3BB4F2;
border: none;
border-radius: 20px;
color: #fff;
font-size: 16px;
cursor: pointer;
}

上面這段CSS代碼是一個簡單的手機搜索框樣式設計，我們可以給搜索框一個容器類 .search，然后在里面放置一個 input[type="text"] 作為輸入框，再放置一個 input[type="submit"] 作為搜索按鈕。

我們可以看到，輸入框的樣式設置了圓角，左側有 30px 的內邊距，右側有 60px 的內邊距，按鈕的樣式設置了右側帶有 60px 寬度的背景，圓角等等，最后使用了 box-sizing 屬性讓邊框和內邊距不要撐開元素。

通過這樣的樣式設計，手機搜索框不僅能夠美觀大方，而且還簡單實用，非常適合移動端網站的設計。在日常開發中，我們可以按照這種樣式設計去創建我們自己的搜索框，讓頁面變得更加完美。