搜索表格輸入框和按鈕的CSS實驗

Chinese (Traditional) (中文（繁體）) translation by Stypstive (you can also view the original English article)

在這篇教程中，我將與你一起探索如何才可以建立一個簡單的搜索表格。我不會做任何瘋狂的事情，相反，我會探索四種不同的方式來帶你體驗如何才能整潔的擁有一個搜索框以及一些CSS幫助下的過渡。

你已經有了一個基本的搜索框

在你的HTML文件中，你需要需要從創建一個搜索的input來開始。如果你能看看下面的這些代碼，你會注意到4個不同的東西：一個.box的div，一個.container-1 的div，一個.icon，以及搜索的input自己。

<div class="box">
  <div class="container-1">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

所有的這4個樣例都會有一個搜索框 - 自然地 - 當然還有一個搜索的圖標。在這四個樣例中，他們每一個都被放在一個容器裡，所以我們可以獨立的操作每一個搜索框。最後，這個div還可以讓所有的容器都是居中對齊的。

添加Font Awesome

Font Awesome是一個圖標庫，你可以在Font Awesome的網站學習更多關於這個項目的知識。

1	<i class="fa fa-search"></i>

上面這個代碼的片段是一個關於如何給你的代碼結構中包含一個圖標的樣例。無論如何，為了讓圖標顯示你顯示你還需要包含一個指向Font Awesome庫的鏈接，你可以從下面的片段看到，只要在文檔的head部分插入這個鏈接即可。

1	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

基本的樣式

我們現在要在分離的一個樣式表添加一些樣式（你同時需要在文檔的head添加一個鏈接來讓它生效）。

body{
  background: #343d46;
}

.box{
  margin: 100px auto;
  width: 300px;
  height: 50px;
}

在上面這個CSS片段中，我們添加了一些基本的樣式到頁面上，這個搜索框的樣式是一個深藍顏色的，所以背景的顏色不能是全白的。這個盒子的class同時是在頁面中居中的，這個也是為了這篇教程的展示。

裝飾搜索框

這個教程片段全部是關於學習如何裝飾搜索框的。在第一個樣例中我會用更詳細的內容來解釋我們要做什麼；我希望確保你明白我們到底要做什麼。在接下來的3個樣例中，我會簡單的向你們展示如何來實現不同的過渡效果。

#1. 背景淡出

第一個樣例我們將要攻克的是每一個搜索的input都會在鼠標滑過時改變背景。我們同時會添加一個過渡效果來讓它看起來不會不和諧。

HTML部分

你已經看到了最基本的HTML頁面結構，這個片段看起來和其他的樣例都很相似。

<div class="box">
  <div class="container-1">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

CSS部分

為了開始我們的樣式，我們需要為搜索框自己定義一些樣式。讓我們一個個添加CSS規則這樣你就知道到底是怎麼回事了。

.container-1{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

首先，我們想要為我們的容器添加樣式。最重要的屬性可能是position:relative。這個是特別設置的所以你的圖標可以被放置在input的上面，你接下來很快就會看到。

.container-1 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #63717f;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Input

接下來，我們想為這個真正的input來添加樣式，所有的上面完成的只是純粹的為了美觀考慮的元素，那些邊框的圓角或者背景顏色並不會影響input的工作。請用筆記幾下左側的padding屬性，它是在那裡來創建一點空間為圖標準備的，所以其實它實際上並不是在input的文字頂上。

在下面，我們有4中不同的規則，他們會為我們樣例中的Search字樣添加佔位符的顏色。這個規則不幸的是需要與每一個其他的前綴元素分離，而且並不能被加固為一個簡寫的規則。你可能會覺得有點點煩人而且在每一個樣例中你都要重複操作！

.container-1 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-1 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-1 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-1 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

圖標

最後，我們將要為圖標添加樣式，最重要的是我們將要設置它的位置是在input頂部的，我們使用position:absolute。 Margin幫助我們將圖標放置在頂部的50%位置。

.container-1 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
}

添加鼠標懸停效果

下一組規則我們要創建的是當搜索框被鼠標懸停產生的效果。在這個樣例中，我們只想改變背景顏色，為了去除input周圍黃色或藍色的光亮（瀏覽器有時候會添加它們）設置outline:none。

1	.container-1 input#search:hover, .container-1 input#search:focus, .container-1 input#search:active{
2	outline:none;
3	background: #ffffff;
4	}

你從上面的片段可以看到，沃恩添加了2條額外的聲明—focus和active。這樣當你停止鼠標懸停input動作的時候效果就不會消失。更重要的是，這個效果同時在input被使用的時候會被顯現出。

創建過渡

為了產生過渡，我們需要添加幾行代碼。回到很前面的地方我們定義input.container-1樣式的規則，在input#search中，在閉合括號之前添加下列片段：

  -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;

我們需要定義過渡的動作簡寫，但是我們可以用依次定義他們的參數作為替代。首先，我們說過渡應該僅僅作用於背景的性質。接下來，我們說過渡應該差不多要有略微超過半秒的時間。最後，我們要定義過渡在消退之前的效果。這個ease不是唯一在這里工作的效果，我們同事可以使用linear或者ease-in，舉個例子。它簡單的可以看起來有點不同。自己嘗試知道你看到你最喜歡的結果。

這個input的樣式應該看起來像下面代碼顯示的一樣。

.container-1 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

  
    -webkit-transition: background .55s ease;
  -moz-transition: background .55s ease;
  -ms-transition: background .55s ease;
  -o-transition: background .55s ease;
  transition: background .55s ease;
}

CSS過渡是如何工作的？

如果你不知道任何關於CSS過渡的事情，讓我給你一個簡短的概述。首先，為了讓過渡工作，我們必須要先定義屬性聲明而且不在鼠標懸停的地方（hover），或者是激活的區域（active），或者焦點（focus）。

CSS過渡允許逐步的改變效果，而且你可以定義特定的參數來控制，比如哪個屬性會被觸發，過渡的持續時間，和哪一種過渡等等。你可以擁有很多個過渡集同時作用於同一個元素。但是，最重要的是，你應該總是包含一個商家前綴來確保在不同的瀏覽器背景下，它們都是對這個屬性都是被支持的而不是通用的。

對於更多的信息請移步至如下觀看：CSS3過渡和變換從零開始

#2. 當鼠標懸停展開input

在這個案例中，搜索框開始的時候只有一個放大鏡的圖標。當你鼠標懸停在圖標上的時候，搜索會展開兵允許你輸入字符串。這個例子中大部分的代碼都和之前的一個非常相似。

HTML部分

<div class="box">
  <div class="container-2">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

CSS部分

.container-2{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

为了开始我们的样式，我们需要为搜索框自己定义一些样式。這個過渡input的樣式有點不同， input會明顯的小一些所以圖標可以顯示在正方形後面，所有剩下的屬性，像是背景或者文字顏色，都是一樣的，因為我們並不想完全改變搜索的樣式。

.container-2 input#search{
  width: 50px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 35px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;

  -webkit-transition: width .55s ease;
  -moz-transition: width .55s ease;
  -ms-transition: width .55s ease;
  -o-transition: width .55s ease;
  transition: width .55s ease;
}

你同時可以看到，我定義了過渡的屬性僅僅作用於寬度。我會保持過渡的持續時間是一樣的，因為它比較快，所以有時候不會讓用戶覺得很煩，但又不是特別短，已經足夠很好的顯示出這個效果了。

下面的這段代碼就是用來改變佔位符的顏色的。

.container-2 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-2 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-2 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-2 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

而且再一次，我們已經有了圖標的CSS樣式。它應該是和前一個樣例一模一樣。

.container-2 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;
}

添加鼠標懸停效果

最後一件事情我們需要做的就是定義在鼠標懸停時候搜索框的樣子。在下面的片段，第一條規則是為了確保表單不會在使用輸入框的時候顯示瀏覽器默認的邊框 - 當輸入的時候，搜索框會一直保持是打開的狀態。中間一條規則會在鼠標懸停的時候展開input到完全的尺寸。

.container-2 input#search:focus, .container-2 input#search:active{
  outline:none;
  width: 300px;
}

.container-2:hover input#search{
width: 300px;
}

.container-2:hover .icon{
  color: #93a2ad;
}

上面代碼的最後一條是用來改變鼠標懸停時候圖標的顏色，這只是一個很小的細節，可以快速的展示給用戶搜索框是激活並且工作的，而不是只是一個閒置的輸入框。這個改變並不是由變化生成的。

#3 鼠標懸停增加圖標尺寸

在這4個樣例中，這個不論在代碼的結構還是視覺效果上都是最巧妙地。為了讓放大鏡的圖標變的更明顯我們將要稍微的增加它的尺寸。

HTML部分

再一次，圖標和搜索框在HTML中的結構是和前兩個案例一樣的。唯一不同的，當然就是.container-3的class名字。

<div class="box">
  <div class="container-3">
      <span class="icon"><i class="fa fa-search"></i></span>
      <input type="search" id="search" placeholder="Search..." />
  </div>
</div>

CSS部分

CSS對於這個樣例來說沒什麼特別的，最多就是它開始的部分和第一個樣例幾乎一樣，默認的設定完全沒有任何區別。注意，在這個樣例的input並沒有任何過渡效果。

.container-3{
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
}

.container-3 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #262626;
  padding-left: 45px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
}

再一次的，我們將為我們的佔位符添加規則。

.container-3 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-3 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-3 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-3 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

現在，如果只是看著它，這個圖標在這個案例的樣子完全是和別的沒什麼區別，同樣的顏色，同樣的位置等等。然而，我還需要為其添加過渡效果。这个过渡将指向所有的性质，这样就可以简短的实现效果而不用分别的将它们一个个列出了。

.container-3 .icon{
  position: absolute;
  top: 50%;
  margin-left: 17px;
  margin-top: 17px;
  z-index: 1;
  color: #4f5b66;

   -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}

添加鼠标悬停效果

.container-3 input#search:focus, .container-3 input#search:active{
    outline:none; 
}

.container-3:hover .icon{
  margin-top: 16px;
  color: #93a2ad;

  -webkit-transform:scale(1.5); /* Safari and Chrome */
  -moz-transform:scale(1.5); /* Firefox */
  -ms-transform:scale(1.5); /* IE 9 */
  -o-transform:scale(1.5); /* Opera */
   transform:scale(1.5);
  }

有幾個不同的事情發生在上面的代碼中。首先，我們在鼠標懸停在圖標的時候改變了它的顏色，然後將它向上移動了一點點所以在縱向改變大小的時候它就是居中了。第二步，我們添加了一個過渡到鼠標懸停的圖標元素上，這樣我們就可以得到一個1.5倍原始尺寸的圖標。由於之前定義的過渡是作用於所有的屬性的，所以當鼠標懸停在圖標上時候，圖標的大小會變化。

再一次，看看CSS3過渡和變形從零開始來學習更多關於變換的屬性。

#4. 懸停按鈕

不像前三個樣例，這個會更加的複雜一些。在鼠標懸停時，一個按鈕會滑到input的頂部並允許你接著進行操作 - 像發送或者Go一樣。這個按鈕會有一個放大鏡的圖標在上面。

HTML部分

<div class="box">
  <div class="container-4">
    <input type="search" id="search" placeholder="Search..." />
    <button class="icon"><i class="fa fa-search"></i></button>
  </div>
</div>

在這裡，HTML有一點點不同， input當然仍然在這裡，不過圖標現在是在button元素之內的，它們會出現在input的後面，按鈕是在input之後是很重要的，因為它決定了懸停效果如何在CSS中被創建。

CSS部分

在這個樣例中CSS有點點不一樣，所以請集中註意力！下面的片段是容器的樣式。首先，少了position:relative；它不再重要因為圖標現在不依賴這個樣式來顯示在input頂部了。然而,我們確實有overflow:hidden。這個讓按鈕在非鼠標懸停狀態依然保持是顯示狀態。理論上來說按鈕會出現在input的右側，但是感謝overflow:hidden當它的寬度超過input的容器後它並沒有顯示出來 - 容器和input是同樣的寬度。

.container-4{
  overflow: hidden;
  width: 300px;
  vertical-align: middle;
  white-space: nowrap;
}

在下面，input並沒有過渡因為它在這個案例中並不是被作用的元素。

.container-4 input#search{
  width: 300px;
  height: 50px;
  background: #2b303b;
  border: none;
  font-size: 10pt;
  float: left;
  color: #fff;
  padding-left: 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

這個片段是為了改變佔位符文字的顏色。

.container-4 input#search::-webkit-input-placeholder {
   color: #65737e;
}

.container-4 input#search:-moz-placeholder { /* Firefox 18- */
   color: #65737e;  
}

.container-4 input#search::-moz-placeholder {  /* Firefox 19+ */
   color: #65737e;  
}

.container-4 input#search:-ms-input-placeholder {  
   color: #65737e;  
}

下面的代碼是為了鼠標懸停在按鍵上的樣式。有一個小技巧來讓它從側面滑出，放置它到右側並且在input的下方，然後讓他變得不可見，除非鼠標懸停。這樣，按鈕是那個改變的元素 - 它會移動 - 所以過渡的效果被定義在它身上。為了讓事情變得簡單一些，我已經將過渡的所有屬性都定義了。

.container-4 button.icon{
  -webkit-border-top-right-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-topright: 5px;
  -moz-border-radius-bottomright: 5px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;

  border: none;
  background: #232833;
  height: 50px;
  width: 50px;
  color: #4f5b66;
  opacity: 0;
  font-size: 10pt;

  -webkit-transition: all .55s ease;
  -moz-transition: all .55s ease;
  -ms-transition: all .55s ease;
  -o-transition: all .55s ease;
  transition: all .55s ease;
}

添加鼠標懸停效果

為了讓按鈕淡出，它需要移動到input的頂上。我們需要使用負margin來完成它，我們預先設置按鈕的不透明度為0所以我們就可以將它重置為1來顯示按鈕。

最後一條規則只會在你鼠標懸停在按鈕上的時候改變按鈕的背景。讓用戶知道按鈕是激活的總是好的，而且你可以點擊它來提交搜索；如果這個功能是沒有激活的狀態就沒有必要有一個按鈕在那裡了。

.container-4:hover button.icon, .container-4:active button.icon, .container-4:focus button.icon{
    outline: none;
    opacity: 1;
    margin-left: -50px;
  }

  .container-4:hover button.icon:hover{
    background: white;
  }

結論

好了，這些就是我們這個CSS實驗的全部內容了！我們用簡單的搜索框和input以及小範圍的效果來改變它們的樣式。你們還有其他的任何對於如何改變此類型的搜索input的建議麼？... 你有一些其他的你想要使用CSS過渡或者變化的地方麼？請在留言區留言告知我們！