在移動端網頁設計中，搜索框是一個必不可少的元素。目前主流的方法是在搜索框上加入一個提交按鈕，用戶點擊按鈕后才能進行搜索。但是，使用CSS3，我們可以實現當搜索框獲取焦點時自動彈出鍵盤的效果，提高搜索的便捷性。

input[type="search"] {
-webkit-appearance: none;
appearance: none;
background-color: transparent;
border: none;
font-size: 14px;
width: 100%;
padding: 10px;
margin-top: 10px;
}
input[type="search"]:focus {
outline: none;
}
input[type="search"]:focus::-webkit-input-placeholder {
color: transparent;
}
/* 自動彈出鍵盤 */
input[type="search"]:focus {
position: fixed;
bottom: 0;
}
/* 修復iOS底部固定元素的bug */
@supports (-webkit-touch-callout: none) {
input[type="search"]:focus {
position: absolute;
bottom: auto;
}
}

代碼解釋：

首先，我們需要自定義搜索框的樣式。使用appearance屬性將原生的搜索樣式去除，再設置背景色、字體大小、內邊距、外邊距等樣式。然后，我們需要去除搜索框得到焦點時的默認樣式，主要是去除輸入框周圍的藍色邊框。

接下來，重點來了！我們使用CSS3的position屬性，將搜索框定位到頁面底部，這樣當搜索框獲取焦點時，瀏覽器自帶的鍵盤就會彈出。但是，這種方法可能會出現iOS瀏覽器的Bug，因為iOS的虛擬鍵盤是覆蓋在頁面之上的，有可能會將我們定位在底部的搜索框蓋住。因此，我們需要使用@supports規則來檢測是否為iOS瀏覽器，如果是，則將搜索框定位為絕對定位。