CSS手機搜索框代碼

在現代的手機應用中，搜索框是一個必要的UI元素。我們可以通過CSS來創建一個漂亮的搜索框。下面就是一個簡單的實現，其中使用了一些CSS樣式。

/*搜索框的樣式*/
.search-box {
width: 100%;
max-width: 300px;
margin: 10px auto;
position: relative;
}
/*輸入框的樣式*/
.search-box input[type="text"] {
padding: 10px;
width: 100%;
border-radius: 20px;
border: none;
background-color: #f2f2f2;
}
/*搜索按鈕的樣式*/
.search-box input[type="submit"] {
position: absolute;
top: 0;
right: 0;
padding: 10px 20px;
border: none;
background-color: #00a3cc;
color: #fff;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
cursor: pointer;
}

首先，我們定義一個class名稱為search-box的div容器來包含輸入框和搜索按鈕。這個搜索框具有響應式，并可以在移動設備上自適應寬度。輸入框使用了標簽，其樣式使用了CSS屬性來控制。搜索按鈕則放置在輸入框右側，這里使用了position屬性來實現。其中，背景顏色、文本顏色、邊框半徑等樣式都是為了讓搜索框看起來更加漂亮。

總的來說，這是一個簡單卻實用的CSS搜索框代碼，可以在不斷的拓展和改進之中不斷地提升用戶體驗。