如何使用 CSS 和 HTML 设计动画文本框

Question

需要设计一个与 whosebug.com header 搜索非常相似的搜索框。即，当放置光标时，它应该展开并显示按钮。是否可以不使用 CSS 和 HTML 以外的任何脚本？

Answer 1

是的，你有 pseudo class :focus。你可以在专注时让它变大：

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

<input>

下一次：您找到了一个工作示例。如果您使用调试控制台，则可以检查元素。只需在聚焦之前检查 styles/javascript，然后在单击它之后检查。那就只是对比一下有什么变化。

Answer 2

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...">

Answer 3

您可以将 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>

如何使用 CSS 和 HTML 设计动画文本框

How to design a animated text box using CSS and HTML

html

css

css-transforms