css - css3 webkit 过渡宽度自动聚焦

Question

请先查看此演示

如果您关注搜索框，它将扩展到 400 像素。

那是因为我在焦点上将宽度设置为 400px

.navbar-search .search-query:focus {
 width:400px;
-moz-transition: width 0.5s ease-out;
-webkit-transition: width 0.5s ease-out;
transition: width 0.5s ease-out;
}

我想在焦点上进行 100% 宽度搜索。

谁能帮我这个？

这是源代码。

Answer 1

添加以下规则：

.navbar-search {
  float: none;
  overflow: hidden;
  margin: 0;
  padding-top: 5px;
  text-align: right;
}
.navbar-search .search-query {
  box-sizing: border-box;
  height: 30px;
}
.navbar-search .search-query:focus {
  width: 100%;
}