css3 webkit 过渡宽度自动聚焦答案

【问题标题】：css3 webkit transition width auto on focuscss3 webkit 过渡宽度自动聚焦
【发布时间】：2013-01-31 07:15:25
【问题描述】：

如果您聚焦搜索框，它将扩大到 400 像素。

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

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

【问题讨论】：

100% 宽度是什么？整个导航栏？如果是这样，导航链接会发生什么？还是你想让它占据导航链接留下的所有剩余宽度？
@BillyMoat 是的，我希望我的搜索栏占据导航链接留下的所有剩余宽度。

标签： css twitter-bootstrap css-transitions

【解决方案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%;
}

【讨论】：