css3 webkit过渡宽度自动焦点

Question

Please check this demo first

如果您将搜索框对焦，它将扩展为400px。

那是因为我在焦点上将宽度设置为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％宽度搜索。

任何人都可以帮我吗？

Here is the source code.

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%;
}