如何操作 - 动画搜索表单

了解如何使用 CSS 创建动画搜索表单。

如何创建动画搜索表单

单击输入字段：

步骤1）添加HTML：

示例

步骤2）添加CSS：

示例

input[type=text] {
  width: 130px;
  -webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}

/* When the input field gets focus, change its width to 100% */
input[type=text]:focus {
  width: 100%;
}

亲自试一试 »

提示：去我们的HTML 表单教程了解有关 HTML 表单的更多信息。

去我们的CSS 表单教程了解有关如何设置 HTML 表单样式的更多信息。