HTML5實踐 -- 可伸縮的mobile搜索框

　　轉載請注明原創地址：http://www.cnblogs.com/softlover/archive/2012/11/20/2779845.html

 

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

　　demo預覽地址：http://webdesignerwall.com/demo/expandable-search-form/

 

　　目的

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

　　在我的站點 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偽類。

 

　　原文地址：http://webdesignerwall.com/tutorials/expandable-mobile-search-form

 

HTML5實踐系列