我想讓我的搜索欄像圖片一樣的彈出窗口？

Question

我正在一個網站上工作。但是我面臨與搜索欄有關的問題。我想讓我的搜索欄像Image這樣的彈出式窗口。

我認爲這可能通過Javascript或Jquery，但我不是這些語言的專家，這就是爲什麼我不能這樣做，我需要你的幫助。所以請幫助我。謝謝。

Answer 1

實際上你並不需要Javascript。在該網站鏈接到您，這是通過CSS的這些行實現：

.site-header .search-field { 
    background-color: transparent; 
    background-image: url(images/search-icon.png); 
    background-position: 5px center; 
    background-repeat: no-repeat; 
    background-size: 24px 24px; 
    border: none; 
    cursor: pointer; 
    height: 37px; 
    margin: 3px 0; 
    padding: 0 0 0 34px; 
    position: relative; 
    -webkit-transition: width 400ms ease, background 400ms ease; 
    transition:   width 400ms ease, background 400ms ease; 
    width: 0; 
} 

.site-header .search-field:focus { 
    background-color: #fff; 
    border: 2px solid #c3c0ab; 
    cursor: text; 
    outline: 0; 
    width: 230px; 
} 

爲了解釋：

上塊設置搜索文本框width: 0;，有效地使其不可見除了圖標，該圖標在填充中。它還指示瀏覽器使用transition行對寬度屬性的任何更改進行動畫處理。

下面的塊有僞元素:focus，所以它只有在搜索字段接收到輸入焦點時纔會生效（最常見的是點擊它）。然後它得到width: 230px;，使它彈出。只要它失去了重點，它會再次消失，因爲width追溯到0。