How TO - 動畫搜尋表單
瞭解如何使用 CSS 建立動畫搜尋表單。
如何建立動畫搜尋表單
單擊輸入欄位
步驟 1) 新增 HTML
示例
<input type="text" name="search" placeholder="搜尋..">
步驟 2) 新增 CSS
示例
input[type=text] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
/* 當輸入欄位獲得焦點時，將其寬度更改為 100% */
input[type=text]:focus {
width: 100%;
}
自己動手試一試 »
提示：前往我們的 HTML 表單教程 瞭解更多關於 HTML 表單的資訊。
轉到我們的 CSS 表單教程 瞭解更多關於如何設定 HTML 表單樣式的資訊。
