动画搜索表单

如何创建动画搜索表单

点击输入框:

---

步骤 1) 添加 HTML:

实例

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

步骤 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 表单样式的信息。