input[type=search]

NO IMAGE

使用css3新增的屬性來控制input[type=search]

  1. ::-webkit-input-placeholder
  2. ::-webkit-search-cancel-button
  3. // 因為一直做的移動端,所以說的這些東西都是針對移動端。

我們可能會想到使用預設的input[type=search],而只對input的外觀做一個修改,因為後面的小×好像和我們需要的效果也差不多,也是灰色的圓圈裡面加個白色的小×,但是不同型號的手機上,後面的小×顯示的各不相同,有點顯示成藍色的小叉並且外面沒有灰色圓圈包裹,有的顯示的和預設的差不多,但是看起來非常醜。種種原因,我們就不得不重寫所有的樣式:佔位符,inpu邊框,後面的小叉。

重寫邊框樣式

input[type=search]{
border-radius: 5px;
border: 1px solid #ebebeb;//必須對預設的border:2px inset覆蓋,要不然下面的樣式也是白搭
width: 98%;
height: 30px;
outline: none;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

重寫佔位符樣式

input[type=search]::-webkit-input-placeholder{
color: blue;
}
  • 1
  • 2
  • 3

重寫後面的小×樣式

 input[type=search]::-webkit-search-cancel-button{
-webkit-appearance: none;//此處只是去掉預設的小×
}
  • 1
  • 2
  • 3

經過上面三步的重寫樣式,基本達到了我們需要的效果的90%,但是還沒達到100%。因為第三部對小×樣式的重寫只是把後面的小×給弄沒了,如果需要小×,還必須多做一點

繼續重寫小×樣式

input[type=search]::-webkit-search-cancel-button{
-webkit-appearance: none;
position: relative;
height: 20px;
width: 20px;
border-radius: 50%;
background-color: #EBEBEB;
}
input[type=search]::-webkit-search-cancel-button:after{
position: absolute;
content: 'x';
left: 25%;
top: -12%;
font-size: 20px;
color: #fff;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

經過以上三步的重寫,我們就可以完完全全的控制input[type=search]的樣式。

關於軟鍵盤上的搜尋按鈕

我們知道軟鍵盤上有個搜尋按鈕 
這裡寫圖片描述 
但是此時我們看到的並沒有search按鈕,而是一個return按鈕,這就是問題所在。

要讓return這個按鈕的位置出現的是search按鈕,那麼就需要這樣一個設定

<form action="#">
<input type="search"/>
</form>
  • 1
  • 2
  • 3

就是必須設定input的type型別為search,並且被form元素包裹,form元素要有action屬性。但是設定了input[type=search],但輸入內容時,後面會出現小×,為了去掉這個小×,重寫下它的樣式即可

input[type=search]::-webkit-search-cancel-button{
-webkit-appearance: none;//此處就是去掉預設的小×
}
  • 1
  • 2
  • 3

雜碎

input[type=search]還有一些額外的屬性,比如

<input type="search" results="5" />
  • 1

results值為一個數字,表示最多儲存幾條搜尋記錄,但是測試也沒看出效果,就不多說了,有興趣的可以自己google或者百度之。