css - css3 webkit遷移幅の自動フォーカス

Question

最初にこのデモを確認してください

検索ボックスにフォーカスすると、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% 幅の検索をフォーカスしたいと思います。

誰でもこれで私を助けることができますか？

これがソースコードです。

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