HTML5實作-可伸縮的mobile搜尋框圖文詳解

　　今天我將介紹如何使用css製作一個可伸縮的mobile的搜尋框，他非常適合於mobile的響應式設計的需要。本教學沒有使用JavaScript，只使用了原生css屬性，所以這是一個非常簡單又有效率的實作。 

　　目的

　　在行動裝置上顯示訊息，要做到寸土寸金，珍惜每一寸的螢幕。例如搜尋框的設計，在一般情況下處於收縮狀態，激活的時候才將他擴展開來，這樣做可以為螢幕上其他元素提供更多地顯示區域。這就是本課程要完成的工作。我們先來看一個效果圖：

　　在我的網站 Best Web Gallery 也有類似的設計，當查詢#按鈕被點擊的時候，觸發jquery的focus事件用來漸入搜尋框。

 

　　HTML程式碼

　　下面的程式碼使用了html5的search標籤：

<form>
    <input type="search" placeholder="Search"></form>

　　重新設定webkit預設搜尋輸入框

　　預設的webkit輸入框的風格如下：

　　為了移除預設效果，讓他看起來更像一般的文字輸入框，我們需要加入如下css：

input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-family: inherit;
    font-size: 100%;
}input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
    display: none;
}

　　設定輸入框樣式

　　我不會逐行講解每條css語句，這裡只強調幾點。我預設的search的寬度是55px，當他在focus狀態下會擴展，寬度變成130px。 transition屬性實現動畫效果，Box-shadow用來在輸入框上實現發光的效果。

　　範例B

　　在demo B 中，搜尋框被最小化了，只存在一個查詢的icon而沒有文字輸入部分。我改變了search的padding和width屬性，來顯示一個完美的圓形的按鈕。我還使用color:transparent來隱藏文字區域。

 

　　瀏覽器相容

　　他在所有主流的瀏覽器上運作正常，例如：Chrome, Firefox, Safari, and IE8+。但不支援ie7及更低版本瀏覽器，因為ie無法辨識 search 輸入框，也不支援:focus偽類。

以上是HTML5實作-可伸縮的mobile搜尋框圖文詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！