如何使用CSS和HTML設計動畫文本框

-4

需要設計一個與Stackoverflow.com標題搜索非常相似的搜索框。即，當放置光標時，它應該展開並顯示按鈕。沒有使用CSS和HTML以外的其他腳本，是否可能？如何使用CSS和HTML設計動畫文本框

2017-10-05 Lawrine

歡迎SO。本網站不是代碼編寫服務，不適用於提供完整的解決方案。預計用戶將展示一些努力和代碼，而SO在此期間將幫助您解決具體的編程問題。你有沒有嘗試過任何東西？請閱讀：https：//stackoverflow.com/help/asking –

是的，你有pseudo class :focus。你可以把它做大聚焦時：

input{ 
 
    width: 100px; 
 
    transition: width 0.4s; 
 
} 
 
input:focus{ 
 
    width: 200px; 
 
}

<input>

下一次：你找到工作的例子。如果您使用調試控制檯，則可以檢查elemt。只需檢查樣式/ javascript，然後再單擊它。然後，這只是一個比較變化。

來源

2017-10-05 09:49:24 Martijn

input{ 
 
    width: 250px; 
 
    height: 30px; 
 
    padding: 0 15px; 
 
    transition: all 0.4s; 
 
    border: 1px solid #000;; 
 
} 
 
input:focus{ 
 
    width: 500px; 
 
}

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

來源

2017-10-05 09:53:24 codesayan

你的答案沒有錯，但幾乎相同（在這種情況下，我的）。建議不要再發布一次，除非您有新的/其他信息。這個答案是沒有額外的信息，從而沒有進一步的幫助TS（:)沒有downvote值得，但值得注意） – Martijn

我在片段，當其他（在這種情況下你）發佈他們的答案。如果你說我可以刪除我的答案。 :) – codesayan

您可以添加transition您輸入的寬度，並改變寬度時，其上的焦點。

我添加了搜索圖標，可以顯示輸入的重點。

#search { 
 
    transition: width 0.2s ease-out; 
 
    width: 200px; 
 
    padding: 10px; 
 
    font-size: 1.2em; 
 
    border:0; 
 
    border:1px solid #ccc; 
 
    border-radius:5px; 
 
} 
 

 
#search:focus { 
 
    width: 50%; 
 
} 
 

 
label 
 
{ 
 
    padding:15px 10px; 
 
    background:blue; 
 
    color:#fff; 
 
    display:none; 
 
} 
 

 
#search:focus ~ label 
 
{ 
 
    display:inline; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<input type="search" placeholder="Search..." id="search" /><label for="search"><i class="fa fa-search" aria-hidden="true"></i></label>

來源

2017-10-05 09:54:16 bhansa

你的回答沒有錯，但幾乎與**兩個**相同。建議不要再發布一次，除非您有新的/其他信息。這個答案是沒有額外的信息，因此沒有進一步的幫助TS（不downvote值得，但值得注意） – Martijn

@Martijn謝謝你告訴我，我會更新。 – bhansa

哈哈，是的，現在你的答案有點不同。但是現在你只是增加了更多的樣式，這對於實際問題沒有任何影響。你的解決方案仍然完全一樣，現在只需填充（就像黑豹的帖子一樣，所以還是沒有什麼新意） – Martijn

如何使用CSS和HTML設計動畫文本框

回答

相關問題