HTML5 搜尋框input [type=search]

HTML5 搜尋框input [type=search]
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

input [type=search] 是HTML新屬性 , 定義用於搜尋的文字欄位;
x-webkit-speech 屬性:在GOOGLE瀏覽器上 還會顯示一個小話筒
autocomplete=”off” 屬性 關閉瀏覽器自動記錄之前輸入的值

webkit核心瀏覽器裡 input 框型別如果是 type=”search” ,那麼將會有邊框問題,border:0px 也不能起到作用;
解決辦法:
input[type=”search”]{-webkit-appearance:none;}

在移動裝置上,每一畫素都很重要。為了在小空間內顯示搜尋表單,會將表單設計的相對簡潔,然後在啟用的時候擴充套件至全寬度。這樣就能夠給其他介面元素或者內容區域騰出空間。你可以在Web Designer Wall和Best Web Gallery上看到這種搜尋框。當你點選輸入區域,它就會擴充套件到全寬度
我們開始:HTML程式碼
下面是一個簡單的HTML表單。使用了html5的輸入標籤。

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

重置預設的Webkit引擎下的Input樣式
在預設情況下,以Webkit引擎為核心的瀏覽器的Input標籤預設樣式如下:
這裡寫圖片描述
為了移除預設樣式,讓其看上去只是一個普通的文字區域,我們新增如下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;
}

樣式化input元素:
注意搜尋輸入框的寬度設定為了55畫素,而在啟用後會擴充套件到130畫素。其中的transition屬性是實現動畫效果的技巧。Box-shadow屬性給input標籤新增了發光的效果。
這裡寫圖片描述

例子B:
在示例B中,搜尋輸入框進一步的最小化,只有搜尋圖示顯示出來,而沒有輸入框。注意我在這裡更改了輸入框的內邊距和寬度屬性,目的是得到一個完美的圓形按鈕。我使用了color : transparent來讓文字不可見。
這裡寫圖片描述

瀏覽器相容性:
這種可擴充套件的表單效果相容所有的主流瀏覽器,例如Chrome, Firefox, Safari和 IE8 。但不支援IE7及以下版本的瀏覽器,原因是IE不支援: focus偽類元素。

相關文章

程式語言 最新文章