向左擴展搜索欄並顯示搜索按鈕

Question

我正在使用以下代碼和代碼正常工作。但我想當用戶點擊搜索按鈕，然後搜索按鈕也會顯示像stackoverflow搜索欄一樣。

HTML： -

   <form> 
       <input type="text" name="search" placeholder="Search.."> 
      </form> 

CSS

input[type=text] { 
display:block; 
margin: 0 0 0 auto; 
width: 250px; 
box-sizing: border-box; 
border: 2px solid #ccc; 
border-radius: 4px; 
font-size: 16px; 
background-color: white; 
background-image: url('/searchicon.png'); 
background-position: 10px 10px; 
background-repeat: no-repeat; 
padding: 12px 20px 12px 40px; 
-webkit-transition: width 0.4s ease-in-out; 
transition: width 0.4s ease-in-out; 

} 

input[type=text]:focus { 
width: 100%; 
} 

Answer 1

按照以下步驟

1. 創建button
2. 將是button搜索欄上
3. 設置的是button到none
4. 現在，只要你專注的搜索欄上，改變display財產display屬性，button到block

試圖實現在自己的第一個驗證碼...

input[type=text] { 
 
display:block; 
 
margin: 0 0 0 auto; 
 
width: 250px; 
 
box-sizing: border-box; 
 
border: 2px solid #ccc; 
 
border-radius: 4px; 
 
font-size: 16px; 
 
background-color: white; 
 
background-image: url('/searchicon.png'); 
 
background-position: 10px 10px; 
 
background-repeat: no-repeat; 
 
padding: 12px 20px 12px 40px; 
 
-webkit-transition: width 0.4s ease-in-out; 
 
transition: width 0.4s ease-in-out; 
 

 
} 
 

 
input[type=text]:focus { 
 
width: 90%; 
 
} 
 
input[type=text]:focus + .but{ 
 
    display: block; 
 
} 
 

 
.but{ 
 
    cursor:pointer; 
 
    width: 100px; 
 
    height: 50px; 
 
    position: absolute; 
 
    right:5px; 
 
    top:5px; 
 
    display:none; 
 
}

<form> 
 
       <input type="text" name="search" placeholder="Search.."><input class="but" type="button" value = "search"> 
 
      </form>